google-chrome - 被 CORS 策略阻止的 CORS 策略阻止的 Cloudfront CDN 字体 : No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

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

我的 CDN header 将 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.

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

Answer 1

你想通了吗？指向您的 CDN 或使用该 CDN 的网站的链接会有所帮助。

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