问题:Cloudfront CDN 字体被 CORS 策略阻止,被 CORS 策略阻止:请求的资源上不存在“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进行检查