Question

我有一个带有Cloudfront CDN的S3存储桶。在那个存储桶中，我有一些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.

问题在于卷发表明存在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浏览器正在执行额外的验证以阻止我的字体。

Answer 1

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

Answer 2

我对CORS和多域的问题是Cloudfront接受了第一个请求的缓存，因此我必须在“白名单标头”中选择“起源”选项。而且有效。 enter image description here

Chrome中CDN背后的woff2字体出现CORS问题

2 个答案: