字体不加载- CORS表示页眉不包含访问控制，但是

Question

问题:我正在使用从一个站点生成的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原产地响应告诉我字体应该是可读的，但是我仍然从请求的网站得到这个错误：

CORS策略阻止了对https://mywebsite/fonts/flatpack.woff?tzy7cr字体的访问“从原点”到“http://anotherwebsite.com”：请求的资源上没有“访问控制-允许-原产地”标题。因此，“http://anotherwebsite.com”源是不允许访问的。

想法或建议？

编辑:下面是一个测试页面的活链，它无法加载图标字体。

Answer 1

差一点就猜对了：

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Methods: "GET"

您需要add头，而不是set。我还会添加该方法以确保。

Answer 2

其他网站购买的高级字体可能会被滥用另一个网站。这就是浏览器级编码复杂化的原因。图像不会受到这种问题的影响。字体相关的CORS因字体、浏览器和bug的类型而变得复杂。除非您使用的是付费源拉CDN或已知的字体提供程序(免费或付费)，否则从自己的服务器提供字体是实用的，以确保在所有浏览器、所有设备上加载字体。值得一读：

1. 关于CORS的官方W3文档，
2. 莫兹拉博士，
3. MaxCDN指南，
4. W3的CSS字体，
5. 这个旧的错误报告
6. 此拉请求

以上资源中有三个选项可以给出正确的答案。您需要从不同用户代理和设备的webpagetest上进行测试，并尝试观看屏幕截图的视频。

第一：

SetEnvIf Origin "https?://(.*\.(mozilla|allizom)\.(com|org|net))" CORS=$0
Header set Access-Control-Allow-Origin %{CORS}e env=CORS

<FilesMatch "\.(ttf|woff|eot)$">
    Header append vary "Origin"
    ExpiresActive On
    ExpiresDefault "access plus 1 year"
</FilesMatch>

两个(单域，HTTPS)：

<FilesMatch "\.(ttf|otf|eot|woff)$">
        SetEnvIf Origin "^http(s)?://(.+\.)?anotherwebsite\.com$" AccessControlAllowOrigin=$0
        Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
</FilesMatch>

三个(多个领域)：

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)?(anotherwebsite.com|cdn.anotherwebsite.com|blahblah.anotherwebsite.com)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
    </IfModule>
</FilesMatch>

还请确保存在适当的MIME类型：

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff
AddType application/font-woff2           .woff2

确保在重新启动之前运行。您可能需要激活某些模块。

Answer 3

我不想把答案归功于我，但这对我有用，多亏了这个家伙：

https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/

将下面的行添加到.htaccess文件中，并将其放在(字体)文件夹中：

<ifmodule mod_headers.c="">
   SetEnvIf Origin "^(.*\.domain\.com)$" ORIGIN_SUB_DOMAIN=$1
   Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
   Header set Access-Control-Allow-Methods: "*"
   Header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept, Authorization"
</ifmodule>