相关疑难解决方法(0)

Firefox没有加载来自不同来源的字体,而不是当前的网页,这是一个长期存在的问题.通常,在CDN上提供字体时会出现问题.

在其他问题中提出了各种解决方案:

CSS @ font-face不支持Firefox,但使用Chrome和IE浏览器

随着Amazon S3 CORS的推出,是否有使用CORS解决Firefox中字体加载问题的解决方案？

编辑:很高兴看到S3 CORS配置的示例.

edit2:我找到了一个有效的解决方案而没有真正了解它的作用.如果有人能够提供有关配置和亚马逊对配置的解释所发生的背景魔法的更详细的解释,将非常感谢,就像nzifnab为它提供赏金一样.

如果我清除了浏览器缓存,那么只需从支持Cloudfront的S3存储桶中找到所有内容.但是,当我关闭缓存时,我在控制台中收到错误:

来自origin [ORIGIN URL]的图像已被跨源资源共享策略阻止加载:请求的资源上没有"Access-Control-Allow-Origin"标头.因此,不允许访问Origin [MY LOCALHOST ADDRESS].

MY CORS配置:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

我也回顾了这个建议,改变了cloundfront发行版的设置.它似乎已经起作用了,但现在绝对不能使用浏览器缓存: 最新的Chomium和Google Canary上的Amazon S3的CORS问题

我也尝试在我的网站.htaccess中添加"Header add Access-Control-Allow-Origin"*"".没运气.注意:我的网站是从localhost托管和访问的(它是一个开发环境).

尝试从Amazon S3服务器加载图像（将crossorigin设置为匿名）后，我们仍然遇到可怕的错误：

 XMLHttpRequest cannot load 
 http://resource-url No 
'Access-Control-Allow-Origin' header is present on the requested resource. Origin
'http://server-url' is therefore not allowed access.

我们已经尝试了几种CORS配置，例如

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

以及Amazon的默认CORS配置。仍然，同样的错误。

其他一些注意事项：

• 此问题在Chrome中存在，但在Firefox中不存在。
• 图像将作为AFrame资产加载（因此XMLHttpRequest）
• curl -XGET -H 'Origin: anonymous' http://resource-url 返回看起来像是图像，从 ?PNG
• 对于Chrome，这是标头。这是回应。
• 对于Firefox，这是标头。响应就是图像。
• 这是CORS上的AFrame文档。但是，由于图像是从S3提取的，并不能在Github Pages上提供，因此它可能没有用。

我尽力了，因此，不胜感激。非常感谢！

我正在使用 MapBox，并且希望向 AWS S3 存储桶中的地图添加一些图像。

我使用的 MapBox 函数是loadImage。loadImage 文档声明“外部域必须支持 CORS”。

我的 JS 代码类似于：

this.map.on('load', () => {
    ...
    this.map.loadImage("https://my-test-bucket.s3-us-west-1.amazonaws.com/long-uuid-here.png", (error, image) => {
    if (error) {
        console.log(error)
        throw error;
    }
// The rest doesn't matter
...

当我的地图在 Chrome 中加载时，出现以下错误：

Access to fetch at 'https://my-test-bucket.s3-us-west-1.amazonaws.com/long-uuid-here.png' from origin 'https://localhost:7000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the …

我们的网站在使用 chrome 时遇到问题，从 amazon S3 加载图像并将crossOrigin属性设置为“Anonymous”。

我们的 S3 服务器设置为：

`

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
        <ExposeHeader>x-amz-request-id</ExposeHeader>
        <ExposeHeader>x-amz-id-2</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

`

我正在使用 canvg.js 从具有远程图像（在亚马逊 S3 服务器上）的 SVG 创建画布，但 Chrome 浏览器返回“请求的资源上不存在‘Access-Control-Allow-Origin’标头。” 执行此代码后出错：

 this.img = document.createElement('img');
            var self = this;
            this.img.onload = function() { self.loaded = true; }
            this.img.onerror = function() { if (typeof(console) != 'undefined')                                            
            console.log('ERROR: image "' + href + '" not found'); self.loaded = true; } } …