Question

我的字体位于static.example.com这样的子域中今天字体不会显示在Chrome中 - 而且也会显示在Firefox中 - 这个错误出现在开发工具中：

来自“http://static.example.com”的字体已被跨源资源共享策略阻止加载：请求的资源上没有“Access-Control-Allow-Origin”标头。因此，不允许原点“http://example.com”访问。»

我已在子域.htaccess文件

中使用此代码

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Headers "Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With"
    Header set Access-Control-Allow-Methods "GET, PUT, POST"
  </FilesMatch>
</IfModule>

此外，如果我在终端尝试curl -I http://static.example.com/fonts/pfcentrosanspro-reg-webfont.eot，我会收到此回复：

HTTP/1.1 200 OK
Server: nginx
Date: Wed, 27 Aug 2014 17:20:50 GMT
Content-Type: font/eot
Content-Length: 26403
Connection: keep-alive
X-Accel-Version: 0.01
Last-Modified: Mon, 05 Aug 2013 17:49:42 GMT
Accept-Ranges: bytes
Cache-Control: max-age=31536000
Expires: Thu, 27 Aug 2015 17:20:50 GMT
X-Powered-By: PleskLin
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With
Access-Control-Allow-Methods: GET, PUT, POST

但错误仍然存在，我已使用以下代码将字体移动到Amazon S3 CDN中的存储桶：

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http://example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
  </CORSRule>
</CORSConfiguration>

没有运气，错误仍然存在 - 字体无法加载并显示CORS错误 - 我甚至修改了Nginx配置文件而没有结果！

我做错了吗？这让我疯了。

该网站是一个带有W3TotalCaché插件的Wordpress博客

感谢您的帮助！

Answer 1

有些浏览器不喜欢这样：

Access-Control-Allow-Origin *

您应该将其设置为原始请求的域。我在类似的问题上遇到了很多困难，终于找到了下面的解决方案（PHP，但你会明白的。）

$origin=isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:$_SERVER['HTTP_HOST'];
header('Access-Control-Allow-Origin: '.$origin);        
header('Access-Control-Allow-Methods: POST, OPTIONS, GET, PUT');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: Authorization, X-Requested-With');
header('P3P: CP="NON DSP LAW CUR ADM DEV TAI PSA PSD HIS OUR DEL IND UNI PUR COM NAV INT DEM CNT STA POL HEA PRE LOC IVD SAM IVA OTC"');
header('Access-Control-Max-Age: 1');

此代码将接受来自所有域的所有请求。这可能是不安全的。您可能希望针对接受域的白名单检查请求。

CORS问题No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上

1 个答案: