字体在 Web 客户端 cors 中被阻止

Question

虽然我在本地工作时一切正常，但现在我上传到主机时字体被我从未听说过的东西 (CORS) 阻止了。字体（和 css、js 等）位于子域中，因为 url 由索引解析（因此路径在域中不起作用）。 css/js 工作正常。

这是 Web 控制台 (firefox) 中的输出：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Oxygen-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Oxygen-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Oxygen-Regular.ttf styles.css:10:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/Montserrat-Regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Montserrat-Regular" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed source: /fonts/Montserrat-Regular.ttf styles.css:6:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff2. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff2 bootstrap.css:267:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.woff. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.woff bootstrap.css:267:12
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at /fonts/glyphicons-halflings-regular.ttf. (Reason: CORS header 'Access-Control-Allow-Origin' missing). <unknown>
downloadable font: download failed (font-family: "Glyphicons Halflings" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: /fonts/glyphicons-halflings-regular.ttf bootstrap.css:267:12

我搜索了这个问题，但找不到这个具体的字体问题和确切的错误消息。

编辑：

解决方法是为提供文件的域/文件夹启用 header。配置可以在虚拟主机块中或在 .htaccess 文件中（在文件所在的文件夹中）。我更喜欢在 vhost 块中设置它：

<IfModule mod_headers.c>
    SetEnvIf Origin "https://(www|sub1|sub2|sub3).domain.com)$" ACAO=[=11=]
    Header set Access-Control-Allow-Origin "%{ACAO}e" env=ACAO
    Header set Access-Control-Allow-Methods "GET"
</IfModule>

在这个例子中，Access-Control-Allow-Origin 将只为白名单域和子域发送 header。我从 domain.com 重定向到 www.domain.com 所以这个例子不会接受没有 www.

的域

Answer 1

您的浏览器抱怨缺少 header：Access-Control-Allow-Origin

因为缺少此 header，您的浏览器不知道所需的访问是合法的。查看 http://enable-cors.org 并选择适合您的服务器的配置。

您需要配置存储字体的服务器！

Answer 2

Interesting gotcha:

lighttpd allows you to add a custom header for all requests by adding this in a given context:
setenv.add-response-header = ( "Access-Control-Allow-Origin" => "*" )
For this to work, you must enable the mod_setenv. But if you don’t enable this module, before you enable your mod_status module, you will never see the custom headers come out of your lighttpd HTTP response header output

Answer 3

阅读大量关于 为什么 GLYPHICON 没有出现的文章...

“如何修复 HTTPS 的 Access-Control-Allow-Origin（CORS 来源）问题”

而且他们都有超级复杂的方法来尝试和修复......在我的情况下......是一个超级简单的解决方案。

我的 HTML 当 Glyphicon 不显示时的代码...

<link href="https://www.Example.com/css/ss.css" rel="stylesheet">
<link href="https://www.Example.com/css/bootstrap.min.css" rel="stylesheet">

解决方案：

我只是删除了 www.来自 URL 我的 CSS & Bootstrap 文件...

<link href="https://Example.com/css/ss.css" rel="stylesheet">
<link href="https://Example.com/css/bootstrap.min.css" rel="stylesheet">

GLYPHICON 立即出现在我的页面上！

希望这对您来说也是如此简单！！

Answer 4

您可以做两件事，要么允许 CORS，要么指向与域相同的托管位置。

字体在 Web 客户端 cors 中被阻止

fonts are blocked in web client cors

cors