Amazon S3的CORS（跨域资源共享）和Firefox跨域字体加载 [英] Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading

问题描述

已经有一个长期存在的问题与Firefox不从不同的来源而非当前网页加载字体。通常情况下，这个问题出现时的字体送达的CDN。

There has been a long standing issue with Firefox not loading font from different origin than the current webpage. Usually, the issue arise when the fonts are served on CDNs.

各种解决方案已被提出的其他问题：

Various solutions has been raised in other questions:

<一个href="http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie">css @字体面不工作与Firefox，但与Chrome和IE 工作

通过引进Amazon S3的CORS的，有没有使用CORS来解决Firefox中的字体加载问题的解决方案？

With the introduction of Amazon S3 CORS, is there a solution using CORS to address the font loading issue in Firefox?

在此先感谢！

编辑：这将是非常高兴看到S3的CORS配置的样本

edit: It would be great to see a sample of the S3 CORS configuration.

EDIT2：我发现实际上不理解什么是做了工作的解决方案。如果任何人都可以提供有关的configs和背景魔法发生在该配置Amazon的跨pretation更详细的解释，这将大大AP preciated，与nzifnab谁提出了一个赏金吧。

edit2: I have found a working solution without actually understanding what it did. If anyone could provide more detailed explanations about the configs and the background magic that happens on Amazon's interpretation of the config, it will be greatly appreciated, as with nzifnab who put up a bounty for it.

推荐答案

更​​新2014年9月10日：

Update September 10, 2014:

您应该不需要做任何下面的查询字符串的黑客了，因为的Cloudfront正确支持CORS现在。请参阅<一href="http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/">http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/而这个答案的详细信息： http://stackoverflow.com/a/25305915/308315

You shouldn't need to do any of the query string hacks below anymore since Cloudfront properly supports CORS now. See http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/ and this answer for more info: http://stackoverflow.com/a/25305915/308315

好了，我终于得到了使用下面的配置与实例文档中的一个小调整工作中的字体。

OK, I finally got the fonts working using the config below with a little tweak from examples in the documentation.

我的字体都托管在S3，而是通过CloudFront的门前。

My fonts are hosted on S3, but fronted by cloudfront.

我不知道为什么它的作品，我的猜测是可能的＆LT; AllowedMethod＆GT; GET 和＆LT; AllowedHeader＆GT; 内容 - * 需要

I'm not sure why it works, my guess is probably that the <AllowedMethod> GET and <AllowedHeader> Content-* is needed.

如果有人精通Amazon S3的CORS的配置可以提供一些线索这灯，这将是极大的AP preciated。

If anyone proficient with Amazon S3 CORS config can shed some lights on this, it'll be greatly appreciated.

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

编辑：

有些开发商面临的Cloudfront的缓存访问控制 - 允许 - 原产地头的问题。此问题已得到解决的AWS的工作人员中的链接（<一href="https://forums.aws.amazon.com/thread.jspa?threadID=114646">https://forums.aws.amazon.com/thread.jspa?threadID=114646)下面，通过评论@杰夫 - 阿特伍德。

Some developers are facing issues of Cloudfront caching the Access-Control-Allow-Origin header. This issue has been addressed by the AWS staff in the link (https://forums.aws.amazon.com/thread.jspa?threadID=114646) below, commented by @Jeff-Atwood.

从联线，建议，作为一种解决方法，使用的查询字符串从不同域调用之间的区别。我会重现缩短的例子在这里。

From the linked thread, it is advised, as a workaround, to use a Query String for differentiating between calls from different domains. I'll reproduce the shortened example here.

使用卷曲来检查响应头：

域A：a.domain.com

Domain A: a.domain.com

curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

从域A响应报头：

Response headers from Domain A:

Access-Control-Allow-Origin: https://a.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

域B：b.domain.com

Domain B: b.domain.com

curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

从域B响应头：

Response headers from Domain B:

Access-Control-Allow-Origin: http://b.domain.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Access-Control-Allow-Credentials: true
X-Cache: Miss from Cloudfront

您会注意到访问控制 - 允许 - 原产地返回不同的值，这得到了过去的Cloudfront缓存。

You will notice the Access-Control-Allow-Origin has returned different values, which got past the Cloudfront caching.

这篇关于Amazon S3的CORS（跨域资源共享）和Firefox跨域字体加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！