被 CORS 策略阻止的 Cloudfront CDN 字体被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头答案

【问题标题】：Cloudfront CDN Font blocked by CORS policy blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource被 CORS 策略阻止的 Cloudfront CDN 字体被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头
【发布时间】：2017-04-23 05:05:00
【问题描述】：

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

我的 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天，有人可以帮助我吗？谢谢！

【问题讨论】：

标签： google-chrome nginx http-headers amazon-cloudfront

【解决方案1】：

你想清楚了吗？指向您的 CDN 或使用 CDN 的网站的链接会很有帮助。

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

【讨论】：