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:

CSS @ font-面对无法使用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：我发现一个工作的解决方案，没有真正理解它做了什么。如果任何人可以提供更多关于配置和背景魔法发生在亚马逊的配置解释，将非常感谢，因为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。请参见 http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/ and this answer for more info： 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上，但是面对云端。

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

我不知道为什么它的工作，我的猜测可能是< AllowedMethod> GET 和< AllowedHeader> 需要内容 - * 。

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

如果任何熟练使用Amazon S3 CORS配置的人都可以解决这个问题，非常感谢。

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缓存 Access-Control-Allow-Origin 头的问题。此问题已由AWS工作人员在链接中解决（ https://forums.aws.amazon.com） /thread.jspa?threadID=114646 ），由@ Jeff-Atwood发表评论。

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.

使用 curl 检查响应标题：

域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的响应标头：

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的响应标头：

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

您会注意到 Access-Control-Allow-Origin 返回的值已经超过Cloudfront缓存。

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

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