在Chrome浏览器中，CDN后面的woff2字体存在CORS问题

Question

我有一个由Cloudfront CDN前置的S3 Bucket。在那个bucket中，我有一些woff2字体，这些字体被自动标记为内容类型octet-stream。当尝试从生产网站上的CSS文件加载该字体时，我收到以下错误：

Access to Font at 'https://cdn.example.com/fonts/my-font.woff2' from origin 
'https://www.live-website.com' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://www.live-website.com' is therefore not allowed access.

问题在于使用curl命令可以展示出Access-Control-Allow-Origin的存在：

HTTP/1.1 200 OK
Content-Type: binary/octet-stream
Content-Length: 98488
Connection: keep-alive
Date: Wed, 08 Aug 2018 19:43:01 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Last-Modified: Mon, 14 Aug 2017 14:57:06 GMT
ETag: "<redacted>"
Accept-Ranges: bytes
Server: AmazonS3
Age: 84847
X-Cache: Hit from cloudfront
Via: 1.1 <redacted>
X-Amz-Cf-Id: <redacted>

在Firefox中一切都正常，所以我想Chrome进行了额外的验证，阻止了我的字体。

Translated Text:

在Firefox中一切都正常，所以我想Chrome进行了额外的验证，阻止了我的字体。

- 0x9BD0

Answer 1

原来问题实际上出在Content-Type上。一旦我将内容类型更改为application/font-woff2并使这些woff2文件的缓存失效，所有东西都顺利通过了。

- 0x9BD0

---

先生，您救了我的一天！如果有什么办法我会给您100分的。 - Arthur

@Arthur，谢谢你的感谢；）我很高兴我的经历能帮助到别人！ - 0x9BD0

我遇到了完全相同的问题。只有在Chrome浏览器中加载woff2字体时出现CORS错误。但不幸的是，即使我将内容类型更改为"application/font-woff2"，问题仍然存在。我使用Cmd+Shift+R重新加载页面并清除了浏览器缓存。Postman显示Access-Control-Allow-Origin在响应头中。我错过了什么吗？ - RyanDing

它对我也起作用了。不过我认为你应该解释一下你是如何改变Content-Type的。我是直接在AWS S3上打开每个文件并更改“元数据”“Content-Type”键完成的。 - clem

原始的MIME类型是什么？据我了解，Content-Type应该是font/woff2。 - Ville

Answer 2

我的CORS和多域名问题是由于Cloudfront在缓存第一个请求，因此我必须选择白名单头部中的Origin选项。这样就可以解决问题了。 在这里输入图片描述

- Paul