Firefox无法加载与当前网页不同来源的字体,这是一个长期存在的问题。通常,当在CDN上提供字体时,问题就会出现。
在其他问题中提出了各种解决方案:
CSS @font-face not working with Firefox, but working with Chrome and IE
随着Amazon的引入,有没有使用CORS来解决S3中字体加载问题的解决方案?
编辑:如果能看到S3 CORS配置的示例,那就太好了。
edit2:我发现了一个有效的解决方案,但实际上并不了解它做了什么。如果有人能提供关于配置的更详细的解释,以及亚马逊对配置的解释产生的背景魔力,将非常感谢,就像nzifnab一样,他们为此提供了赏金。
发布于 2014-08-14 18:32:22
经过一些调整之后,我似乎已经在没有查询字符串hack的情况下工作了。更多信息请点击此处:http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorS3Origin.html#RequestS3-cors
我将通过我的整个设置,以便很容易地看到我做了什么,希望这能帮助其他人。
背景信息:我正在使用一个包含asset_sync gem的Rails应用程序将资源放到S3上。这包括字体。
在S3控制台中,我点击了我的存储桶、属性和“编辑cors配置”,这里:
在文本区域中,我有类似这样的东西:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://*.example.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
然后在云前端面板(https://console.aws.amazon.com/cloudfront/home)中,我创建了一个发布,添加了一个指向我的S3存储桶的原点
然后添加了默认路径的行为,以指向基于S3的源I设置。我还点击了白名单标题并添加了Origin
:
现在发生的事情是这样的,我相信这是正确的:
1)检查S3报头设置是否正确
curl -i -H "Origin: https://example.com" https://s3.amazonaws.com/xxxxxxxxx/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
x-amz-id-2: Ay63Qb5uR98ag47SRJ91+YALtc4onRu1JUJgMTU98Es/pzQ3ckmuWhzzbTgDTCt+
x-amz-request-id: F1FFE275C0FBE500
Date: Thu, 14 Aug 2014 09:39:40 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Content-Type: application/x-font-ttf
Content-Length: 12156
Server: AmazonS3
2)检查Cloudfront是否与报头一起工作
curl -i -H "Origin: https://example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 09:35:26 GMT
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 77bdacfea247b6cbe84dffa61da5a554.cloudfront.net (CloudFront)
X-Amz-Cf-Id: cmCxaUcFf3bT48zpPw0Q-vDDza0nZoWm9-_3qY5pJBhj64iTpkgMlg==
(请注意,上面是cloudfront中的一个未命中,因为这些文件被缓存了180秒,但在命中时也是如此)
3)使用不同的源(但在S3存储桶的CORS上允许的源)命中cloudfront - Access-Control-Allow-Origin
未被缓存!耶!
curl -i -H "Origin: https://www2.example.com" https://xxxxx.cloudfront.net/assets/fonts/my-cool-font.ttf
HTTP/1.1 200 OK
Content-Type: application/x-font-ttf
Content-Length: 12156
Connection: keep-alive
Date: Thu, 14 Aug 2014 10:02:33 GMT
Access-Control-Allow-Origin: https://www2.example.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
Cache-Control: public, must-revalidate, proxy-revalidate, max-age=180
Last-Modified: Mon, 09 Dec 2013 14:29:04 GMT
ETag: "98918ee7f339c7534c34b9f5a448c3e2"
Accept-Ranges: bytes
Server: AmazonS3
Vary: Origin
X-Cache: Miss from cloudfront
Via: 1.1 ba7014bad8e9bf2ed075d09443dcc4f1.cloudfront.net (CloudFront)
X-Amz-Cf-Id: vy-UccJ094cjdbdT0tcKuil22XYwWdIECdBZ_5hqoTjr0tNH80NQPg==
请注意,在没有查询字符串黑客攻击的情况下,域已成功更改。
当我更改原始标头时,似乎总是在第一个请求上有一个X-Cache: Miss from cloudfront
,然后我得到了预期的X-Cache: Hit from cloudfront
附注:值得注意的是,当执行curl -I (大写I)时,不会显示Access-Control-Allow-Origin头部,因为它只是一个头部,我执行-i使其成为GET并向上滚动。
发布于 2012-09-25 02:51:40
文档指出,您可以将该配置作为“存储桶中的cors子资源”。我认为这意味着我将使用配置在存储桶的根目录下创建一个名为"cors“的文件,但这将不起作用。最后,我必须登录到亚马逊S3管理区域,并在我的存储桶的properties
对话框中添加配置。
S3可以使用一些更好的文档...
发布于 2014-05-21 11:48:01
在我的例子中,我没有在CORS配置中定义XML名称空间和版本。定义那些有效的。
变化
<CORSConfiguration>
至
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
https://stackoverflow.com/questions/12229844
复制相似问题