Css Amazon S3 CORS(跨域资源共享)和 Firefox 跨域字体加载

发布于09月08日

Firefox长期以来一直存在一个问题，即不能从与当前网页不同的来源加载字体.通常，在CDN上提供字体时会出现问题.

在其他问题上已经提出了各种解决方案:

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

随着Amazon S3 CORS的推出，有没有一种解决方案可以使用CORS来解决Firefox中的字体加载问题？

编辑:如果能看到S3 CORS配置示例，那就太棒了.

编辑2:我发现了一个可行的解决方案，但实际上并不了解它的作用.如果有人能提供关于配置的更详细的解释，以及亚马逊对配置的解释所产生的背景魔力，我们将非常感激，就像nzifnab一样，他们为此悬赏.

推荐答案

2014年9月10日更新:

由于CloudFront现在可以正确支持CORS，因此您不再需要执行下面的任何查询字符串删减操作.有关更多信息，请参阅http://aws.amazon.com/blogs/aws/enhanced-cloudfront-customization/和此答案:https://stackoverflow.com/a/25305915/308315

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

我的字体托管在S3上，但前面是CloudFront.

我不知道它为什么能用，我猜可能需要<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>

编辑:

一些开发人员面临着缓存Access-Control-Allow-Origin头的CloudFront问题.AWS员工已在下面的链接(https://forums.aws.amazon.com/thread.jspa?threadID=114646)(@Jeff-Atwood comments )中解决了此问题.

在链接线程中，建议使用Query String来区分来自不同域的调用，作为一种解决方法.我将在这里复制缩短的示例.

使用curl判断响应报头:

域名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.通用域名格式

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