字体未加载 - 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 Origin 响应告诉我字体应该是可读的，但我仍然从请求网站收到此错误：

访问 https://mywebsite/fonts/flatpack.woff?tzy7cr' 来自来源 'http://anotherwebsite.com' 已被 CORS 策略阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源 'http://anotherwebsite.com' 访问。

想法或建议???

编辑：这是一个实时链接到无法加载图标字体的测试页面。

Answer 1

几乎做对了：

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

你需要

add

标题而不是

set

。我还要添加方法以确保。

Answer 2

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

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

一个：

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

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

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>

字体未加载 - CORS 表示标头不包含访问控制但有

问题描述投票：0回答：3

3个回答

最新问题

字体未加载 - CORS 表示标头不包含访问控制但有

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3