如何防止 Chrome/FF 由于 CORS 策略而阻止 CDN 字体？

Posted 2023-03-04

【中文标题】如何防止 Chrome/FF 由于 CORS 策略而阻止 CDN 字体？

【英文标题】：How to prevent Chrome/FF blocking CDN fonts due to CORS policy?

【发布时间】：2017-06-24 03:07:58

【问题描述】：

我刚刚将一个 (Wordpress) 网站迁移到一个新的托管位置。

该网站运行良好，除了 Chrome 和 Firefox 不显示某些字体。

Access to Font at 'http://example.com/site/wp-content/themes/mytheme/fonts/modules.ttf' 
from origin 'http://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.

我使用 Cloudfront 来提供字体（我使用 example.com 作为来源，而不是 S3）。 Wordpress .htaccess 包含以下内容：

<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>
<IfModule mod_mime.c>

# Web fonts
AddType application/font-woff woff
AddType application/vnd.ms-fontobject eot

AddType application/x-font-ttf ttc ttf
AddType font/opentype otf

AddType     image/svg+xml svg svgz
AddEncoding gzip svgz

</IfModule>

调试/解决此问题的明智方法是什么？

【问题讨论】：

据我了解，您将 .htaccess 放在 WordPress 端，对吗？但它应该在字体所在的“服务器”端。根据 CORS，资源（字体）的所有者授予对客户端服务器（WordPress 站点）的访问权限。

感谢@KAGGDesign，我是新手，解释得不是很好。据我了解，Wordpress 网站 是 服务器。 CDN 的来源是 Wordpress 站点。例如，如果我在 S3 存储桶中托管字体，则将访问策略添加到该存储桶是相对简单的。但是以 WP 站点为来源，我不清楚如何配置。

同样奇怪的是 Safari 加载字体没有问题

与其他浏览器不同，Safari 不（当前）对 @font-face 强制执行 CORS 限制

感谢@sideshowbarker，我不认为 Chrome 对 CORS 字体的限制过于严格。但也许这已经改变了？

【参考方案1】：

经过大量谷歌搜索和试验，结果证明我需要在新服务器上启用 mod_headers 模块。

sudo a2enmod headers
sudo service apache2 reload

在这里发帖希望能在将来避免别人头疼。