10

我有一个 S3 存储桶，前面有一个 Cloudfront CDN。在那个桶中，我有一些 woff2 字体，它们自动标记为 content type 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 正在做一个额外的验证来阻止我的字体。

4

2 回答 2

17

事实证明，问题实际上出在Content-Type. 一旦我将内容类型更改为application/font-woff2并使这些woff2文件的缓存无效，一切都顺利进行。

于 2018-10-19T13:21:34.643 回答
3

我对 CORS 和多域的问题是 Cloudfront 正在缓存第一个请求，因此我必须在 Whitelist Headers 中选择 Origin 选项。它有效。 在此处输入图像描述

于 2020-12-11T15:34:44.750 回答