问题在于:我正在使用从一个站点生成的html,该站点正在被推送到另一个站点(不同的域)。除了字体(主要用于图标)没有显示外,其他一切都正常。我收到了CORS错误,如下所述。
我已经将以下代码添加到存储字体的站点上的.htaccess文件中,该文件允许跨任何域访问字体:
<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
我使用cUrl检查了标题:
curl -I https://mywebsite.com/fonts/flatpack.woff?tzy7cr
HTTP/1.1 200 OK
Server: nginx
Date: Fri, 23 Jun 2017 18:33:58 GMT
Content-Type: text/plain
Content-Length: 142020
Connection: keep-alive
X-Accel-Version: 0.01
Last-Modified: Fri, 23 Jun 2017 17:49:02 GMT
ETag: "1a474c-22ac4-552a4378235b7"
Accept-Ranges: bytes
X-Powered-By: PleskLin
Access-Control-Allow-Origin: *
Access Origin响应告诉我字体应该是可读的,但我仍然从请求网站收到此错误:
CORS策略已阻止从源“http://anotherwebsite.com "访问https://mywebsite/fonts/flatpack.woff?tzy7cr处的字体:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问源“http://anotherwebsite.com”。
想法或建议???
编辑:这里是一个live link到一个测试页,无法加载图标字体。
3条答案
按热度按时间7vux5j2d1#
几乎猜对了:
你需要
add
头文件,而不是set
。我还添加了方法来确保。dgsult0t2#
一些其他网站购买的高级字体可能会被其他网站滥用。这是浏览器级编码复杂化的原因。图像不会遭受这样的问题。字体相关的CORS是复杂的字体类型,浏览器和错误。除非你是使用付费来源拉CDN或已知的字体提供商(免费或付费),它是实用的服务字体从自己的服务器为了确保字体加载在所有浏览器,所有设备.它是值得一读:
以上资源中有三个选项可以给你一个正确的答案。你需要从不同的用户代理和设备上的webpagetest. org进行测试,并尝试观看截图的视频。
第一:
两个(单域,HTTPS):
三个(多个域):
还要确保存在正确的MIME类型:
请确保在重新启动之前运行Apache configtest。您可能需要激活某些模块。
i5desfxk3#
我不想把答案归功于我,但这对我很有效,这要感谢这个家伙:
https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/
将下列行添加到.htaccess文件并将其放入您的(font)文件夹中: