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

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

编辑：

修复方法是为服务文件的域/文件夹启用标头。配置可以位于虚拟主机块中，也可以位于.htaccess文件中（位于文件所在的文件夹中）。我更喜欢在vhost块中设置它：

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

在此示例中，Access-Control-Allow-Origin只会发送列入白名单的域和子域的标头。我从domain.com重定向到www.domain.com，因此此示例不接受没有www的域。

Answer 1

您的浏览器抱怨标题丢失：Access-Control-Allow-Origin

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

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

Answer 2

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

Answer 3

Interesting gotcha：

lighttpd允许您通过添加为所有请求添加自定义标头   这在给定的背景下：
setenv.add-response-header = ( "Access-Control-Allow-Origin" => "*" )
为了这个工作，你必须启用mod_setenv。但是，如果您之前没有启用此模块启用mod_status模块后，您将永远不会看到自定义标头来自lighttpd HTTP响应标头输出

Answer 4

阅读有关为什么GLYPHICON不显示...的大量文章

“如何为HTTPS解决Access-Control-Allow-Origin（CORS起源）问题”

他们都拥有超级复杂的方法来尝试解决...就我而言...是一个超级简单的解决方案。

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

<链接href =“ https://www.Example.com/css/ss.css” rel =“ stylesheet”>

<链接href =“ https://www.Example.com/css/bootstrap.min.css” rel =“ stylesheet”>

-

解决方案：

我只是删除了www。从我的CSS和Bootstrap文件的URL中...

<链接href =“ https://Example.com/css/ss.css” rel =“ stylesheet”>

<链接href =“ https://Example.com/css/bootstrap.min.css” rel =“ stylesheet”>

-

然后GLYPHICON立刻出现在我的页面上！

希望您也这么简单！

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

4 个答案: