cors - 字体在 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 。配置可以在虚拟主机 block 中，也可以在 .htaccess 文件中(在文件所在的文件夹中)。我更喜欢将其设置在 vhost block 中:

<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只会发送列入白名单的域和子域的 header 。我从 domain.com 重定向至 www.domain.com所以这个例子不会接受没有 www 的域.

Answer 1

您的浏览器提示缺少标题:Access-Control-Allow-Origin

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

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