google-chrome – 被CORS策略阻止的CORS策略阻止的Cloudfront CDN字体：请求的资源上没有“Access-Control-Allow-Origin”标头

我使用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天了,有人可以帮帮我吗？谢谢！

解决方法:

你搞清楚了吗？您的cdn或使用该cdn的网站的链接会很有帮助.

可能是Chrome会对您的发行版执行预检OPTIONS请求,并且您的来源没有为此设置标头.你可以用它来检查
curl -I -X OPTIONS http://cdn.example.com/ThemeIcons.woff?387osh

标签：nginx,http-headers,google-chrome,amazon-cloudfront
来源： https://codeday.me/bug/20190710/1429072.html