取消状态阻止字体下载答案

【问题标题】：canceled status blocking font download取消状态阻止字体下载
【发布时间】：2017-07-03 00:08:33
【问题描述】：

我有一个页面，其中包含一些已被赋予字体系列的文本：

这个字体是从一个铸造厂下载的，并且是为带有@font-face 的页面定义的：

当页面呈现时，浏览器退出字体但请求被取消阻止并且文本没有应用字体系列：

有谁知道是什么原因导致取消？这曾经有效，我无法想象我做了什么或发生了什么破坏它。

感谢您的帮助。

【问题讨论】：

控制台报错了吗？这个Constitution.ttf 是否部署在不同的域中？
是的！错误是：“从http://example.com 访问example.com/fonts/Constitution.ttf 的字体已被CORS 策略阻止。'Access-Control-Allow-Origin' 标头包含多个值：http://example.com、https://example.com，但只有一个是允许。http://example.com 是，因此不允许访问。”谢谢！解决此问题的最佳方法是什么？
应该只有一个Access-Control-Allow-Origin 标头，只有一个来源（或通配符）。我猜这是由于在服务器配置中意外添加了额外的 Access-Control-Allow-Origin 标头造成的。请检查我的答案。

标签： http fonts request-cancelling

【解决方案1】：

Access-Control-Allow-Origin 标头只需要一个来源或通配符 (*)。

您在问题评论中提到的错误（“'Access-Control-Allow-Origin'标头包含多个值......但只允许一个”）清楚地表明Access-Control-Allow-Origin标头中有多个值，或者有多个Access-Control-Allow-Origin 标头。

要解决这个问题，应该只有一个Access-Control-Allow-Origin 标头，只有一个原始值。

如问题中所述：“这曾经有效”。我猜这个问题是由于在服务器配置中意外添加了额外的Access-Control-Allow-Origin 标头造成的。

参考请查看W3Cspecification:

一个资源可以定义一个 Access-Control-Allow-Origin 标头。标头必须与以下 ABNF 匹配：

Access-Control-Allow-Origin = "Access-Control-Allow-Origin" ":" ascii-origin | “*”

ascii-origin = 来源
的ASCII序列化

【讨论】：

我用 mod_rewrite 修复了这个问题，将非 HTTPS 请求发送到 HTTPS。但是如果我想允许 HTTP 和 HTTPS 访问，我很好奇如何解决它。我从未在代码中指定 Accedd-Control-Allow-Origin 标头，那么它是如何设置的，我该如何修改它？谢谢
@Steve 我猜http://example.com 托管网页。在这种情况下，您只需将https://example.com 放在Access-Control-Allow-Origin 标头中。如果https://example.com 托管网页，则将http://example.com 放在Access-Control-Allow-Origin 标头中。否则，只需使用*。
如果您从未手动指定Access-Control-Allow-Origin，我的猜测是：它是由某个模块/插件设置的...

【解决方案2】：

将其放入您的虚拟主机定义或.htaccess文件中：

<FilesMatch ".(ttf|otf|woff|woff2|eot|ttc)$">
    Header set Access-Control-Allow-Origin "*"
    Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
</FilesMatch>

重启 Apache 网络服务器
多次刷新页面（硬刷新）

【讨论】：