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

Question

我刚刚将（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>

调试/解决此问题的合理方法是什么？

Answer 1

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

sudo a2enmod headers
sudo service apache2 reload

在这里张贴，希望将来能让别人头疼。