CORS 策略阻止的 Cloudfront CDN 字体被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header

Question

我使用 nginx 作为我的主机，使用 Amazon Cloudfront 作为我的 cdn。

我的 header 来自我的 cdn 的 Access-Control-Allow-Origin 设置为 *

来自我的网站：

curl -I http://example.com/ThemeIcons.woff?387osh
HTTP/1.1 200 OK
Server: nginx
Date: Thu, 08 Dec 2016 03:01:23 GMT
Content-Type: application/font-woff
Content-Length: 18068
Last-Modified: Sat, 25 Jul 2015 05:35:17 GMT
Connection: keep-alive
ETag: "55b32015-4694"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Access-Control-Allow-Origin: *
Accept-Ranges: bytes

来自我的 cdn 站点：

curl -I http://cdn.example.com/ThemeIcons.woff?387osh
HTTP/1.1 200 OK
Content-Type: application/font-woff
Content-Length: 18068
Connection: keep-alive
Server: nginx
Date: Thu, 08 Dec 2016 03:01:35 GMT
Last-Modified: Sat, 25 Jul 2015 05:35:17 GMT
ETag: "55b32015-4694"
Expires: Thu, 31 Dec 2037 23:55:55 GMT
Cache-Control: max-age=315360000
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
X-Cache: Miss from cloudfront
Via: 1.1 251651f117f01cad42a0ea283b85cb0a.cloudfront.net (CloudFront)
X-Amz-Cf-Id: iFxwbrqD8DWkxlnqsvFMHnO6M4BLU5bywk5MsicXZ00whNzV32U_Rw==

但 chrome 控制台中仍然显示消息，

Access to Font at
'http://cdn.example.com/ThemeIcons.woff?387osh' 
from origin 'http://cdn.example.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://example.com' is therefore not allowed access.

我已经研究了 2 天了，有没有人可以帮助我？谢谢！

Answer 1

你想出来了吗？ link 到您的 cdn 或使用 cdn 的网站会很有帮助。

可能是 Chrome 对您的分发发出了预检选项请求，而您的来源没有为此设置 header。你可以检查这个 curl -I -X OPTIONS http://cdn.example.com/ThemeIcons.woff?387osh

CORS 策略阻止的 Cloudfront CDN 字体被 CORS 策略阻止：请求的资源上不存在 'Access-Control-Allow-Origin' header

Cloudfront CDN Font blocked by CORS policy blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

google-chrome

nginx

http-headers

amazon-cloudfront