Question

问题：我正在使用从一个网站生成的html被推送到另一个网站（不同的域）。一切都运行良好，除了字体（主要用于图标）没有显示。我收到CORS错误，如下所述。

我已将以下代码添加到存储字体的网站上的.htaccess文件中，该文件允许在任何域中访问字体：

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

我使用cUrl检查了标题：

- (void)mapView:(id)mapView didAddAnnotationViews:(id)views {}

Access Origin响应告诉我该字体应该是可读的但我仍然从请求网站收到此错误：

从documentation'访问字体起源'https://mywebsite/fonts/flatpack.woff?tzy7cr'已被CORS政策阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许来源“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因字体，浏览器和错误的类型而变得复杂。除非您使用付费来源拉CDN或已知字体提供商（免费或付费），否则为了确保在所有浏览器，所有设备上加载字体，从自己的服务器提供字体是切合实际的。值得一读：

official W3 doc about CORS，
Mozilla doc，
MaxCDN's guide，
W3's CSS font doc，
this old bug report
this pull request

上述资源有三个选项可以为您提供正确的答案。您需要从不同用户代理商的网页测试点组织进行测试。设备，并尝试观看截图的视频。

一：

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表示标题不包含访问控制但有

3 个答案: