.htaccess 字体未加载- CORS表示标题不包含访问控制,但存在

vcudknz3  于 2022-11-16  发布在  其他
关注(0)|答案(3)|浏览(159)

问题在于:我正在使用从一个站点生成的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到一个测试页,无法加载图标字体。

7vux5j2d

7vux5j2d1#

几乎猜对了:

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

你需要add头文件,而不是set。我还添加了方法来确保。

dgsult0t

dgsult0t2#

一些其他网站购买的高级字体可能会被其他网站滥用。这是浏览器级编码复杂化的原因。图像不会遭受这样的问题。字体相关的CORS是复杂的字体类型,浏览器和错误。除非你是使用付费来源拉CDN或已知的字体提供商(免费或付费),它是实用的服务字体从自己的服务器为了确保字体加载在所有浏览器,所有设备.它是值得一读:

  1. official W3 doc about CORS
  2. Mozilla doc
  3. MaxCDN's guide
  4. W3's CSS font doc
  5. this old bug report
  6. this pull request
    以上资源中有三个选项可以给你一个正确的答案。你需要从不同的用户代理和设备上的webpagetest. 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。您可能需要激活某些模块。

i5desfxk

i5desfxk3#

我不想把答案归功于我,但这对我很有效,这要感谢这个家伙:
https://crunchify.com/how-to-fix-access-control-allow-origin-issue-for-your-https-enabled-wordpress-site-and-maxcdn/

将下列行添加到.htaccess文件并将其放入您的(font)文件夹中:

<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>

相关问题