css - Amazon S3 CORS(Cross-Origin Resource Sharing)和Firefox跨域字体加载

Question

Firefox 无法加载与当前网页来源不同的字体，这是一个长期存在的问题。通常，在 CDN 上提供字体时会出现问题。

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

CSS @font-face not working with Firefox, but working with Chrome and IE

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

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

edit2:我找到了一个可行的解决方案，但实际上并没有真正理解它的作用。如果有人可以提供有关配置的更详细的解释以及亚马逊对配置的解释所发生的背景魔法，我们将不胜感激，就像 nzifnab 一样，他为此悬赏。

Answer 1

2014 年 9 月 10 日更新:

由于 Cloudfront 现在正确支持 CORS，因此您不需要再执行下面的任何查询字符串 hack。参见 http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/以及此答案以获取更多信息:https://stackoverflow.com/a/25305915/308315

---

好的，我终于使用下面的配置使用文档中的示例进行了一些调整，使字体正常工作。

我的字体托管在 S3 上，但前端是云端。

我不确定它为什么起作用，我猜可能是 <AllowedMethod> GET和 <AllowedHeader> Content-*是需要的。

如果任何精通 Amazon S3 CORS 配置的人可以对此有所了解，我们将不胜感激。

<?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 的问题 header 。 AWS 工作人员已在下面的链接 ( https://forums.aws.amazon.com/thread.jspa?threadID=114646 ) 中解决了这个问题，@Jeff-Atwood 发表了评论。

在链接的线程中，作为解决方法，建议使用查询字符串 来区分来自不同域的调用。我将在此处重现缩短的示例。

使用 curl检查响应 header :

域名A:a.domain.com

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

来自域 A 的响应 header :

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

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

来自域 B 的响应 header :

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 缓存。