logo标签列表

如何修复“缺少跨域资源共享（CORS）响应头”Web字体问题？

.htaccessfontscorsfont-facewebfonts
33

由于某种原因，我的网站上的字体停止渲染。这些字体存储在本地，与网站位于同一服务器上。

我查了一下问题，似乎是缺少跨域资源共享（CORS）响应头，但是我不理解如何解决这个问题。

所有各种网站都建议使用：Access-Control-Allow-Origin:*

但作为前端开发人员，我不知道该把它放在哪里。这是主机可以帮助解决的吗？

我该怎么做才能解决这个问题？

编辑：

相关网站是：http://cyclistinsuranceaustralia.com.au/

例如右上角的电话号码应该是Bebas字体，但它默认为Impact。

在控制台中，我得到以下错误：

源自 'http://www.cyclistinsuranceaustralia.com.au' 的字体已被跨域资源共享策略阻止加载：'Access-Control-Allow-Origin'头的值为 'http://www.cyclistinsuranceaustralia.com.au'，与提供的来源不相等。因此不允许使用 'http://cyclistinsuranceaustralia.com.au' 来访问。

我联系了我的主机，他说应该放置：

```Access-Control-Allow-Origin:*```
Access-Control-Allow-Origin "http://www.cyclistinsuranceaustralia.com.au"

我在我的 .htaccess 文件中添加了这段代码，但没有任何改变。

1
我认为你的解决方案在这里：https://dev59.com/O3I-5IYBdhLWcg3w0cOG - Croises
@Croises 謝謝，但不幸的是我對那沒有任何概念。 - MeltingDog
查看此链接：https://dev59.com/SGUp5IYBdhLWcg3w1aB7 - undone
这是一个共享主机还是专用服务器？ - Christian Bonato
你的网站托管在哪里？Apache？共享托管？C-Panel？ - user239546
6个回答
28
如果你只是对使用 Access-Control-Allow-Origin:* 感兴趣， 你可以在站点根目录的 .htaccess 文件中实现。
Header set Access-Control-Allow-Origin "*"

一些有用的信息在这里: http://enable-cors.org/server_apache.html
你试过这个 .htaccess 文件了吗？ - Croises
1
不要将其设置为“*”。那可能是危险的。 - ADJenks
22
我没有使用<base>标签，即使它会产生错误。 - Teekam
6
我假设您的主机使用C-Panel，并且很可能是HostGator或GoDaddy。在这两种情况下，它们都使用C-Panel（事实上，很多主机都是如此）来尽可能地简化服务器管理，使最终用户的操作更加容易。即使您是通过其他人进行托管，请查看是否可以登录某种管理面板并找到一个.htaccess文件可供编辑。（注意：前面的句点意味着它是“隐藏”的文件/目录）。
一旦找到.htaccess文件，请添加以下行：
  1. Header set Access-Control-Allow-Origin "*" 只是为了测试它是否有效。 警告：请勿在生产服务器上使用此行。
它应该会起作用。如果不起作用，请联系您的主机询问为什么该行不起作用，他们可能能够迅速帮助您解决问题。
一旦您完成上述工作，请将*更改为请求域的地址http://cyclistinsuranceaustralia.com.au/。您可能会遇到规范寻址（包括www）的问题，如果遇到问题，则可能需要为重定向配置您的主机。但这是另一个较小的问题，您至少在正确的位置。
3
在您的个别情况中，问题似乎在于从非规范 URL（www.site.com vs. site.com）访问网站。

不需要解决 CORS 问题（这可能需要编写代理来使用适当的 CORS 标头将字体发送到服务器，具体取决于服务提供商），您可以将 Url 规范化，始终在规范 URL 上提供内容，并在请求不带“www.”的页面时进行重定向。

另外，您可以将字体上传到已知配置了 CORS 标头的不同服务器/CDN，或者您可以轻松地配置这样做。

0

我们在共享主机（Cpanel）上遇到了与fontawesome-webfont.woff2完全相同的问题。我正在为WordPress Multisite项目工作中解决“无cookie域”的难题，我的“www.domain.tld”页面在Chrome中会出现以下错误（3次）：

源自'http://static.domain.tld'的字体因跨源资源共享策略而被阻止加载：所请求的资源上没有'Access-Control-Allow-Origin'头。因此，源'http://www.domain.tld'不允许访问。

在Firefox中，稍微详细一些：

可下载字体：下载失败（字体系列：“FontAwesome”样式：正常重量：正常拉伸：正常SRC索引：1）：错误的URI或不允许跨站点访问来源：http://static.domain.tld/wp-content/themes/some-theme-here/fonts/fontawesome-webfont.woff2?v=4.7.0
font-awesome.min.css:4:14 跨域请求被阻止：同源策略禁止读取远程资源http://static.domain.tld/wp-content/themes/some-theme-here/fonts/fontawesome-webfont.woff?v=4.7.0。（原因：CORS标头“Access-Control-Allow-Origin”丢失）。
我在QWANT.com上搜索并找到了这篇SO文章：Access-Control-Allow-Origin wildcard subdomains, ports and protocols。
在与不同的共享主机支持人员聊了一个小时（其中一个甚至不知道浏览器中的F12...），然后等待对票据的响应，但在玩mod_security时没有得到任何帮助。同时，我试图从帖子中拼凑.htaccess文件的代码，并成功地解决了406错误问题。
    <IfModule mod_headers.c>
    <IfModule mod_rewrite.c>
        SetEnvIf Origin "http(s)?://(.+\.)?domain\.tld(:\d{1,5})?$" CORS=$0
        Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
        Header merge  Vary "Origin"
    </IfModule>
    </IfModule>

我将这段代码添加到了我的站点根目录下的 .htaccess 文件的顶部，现在我有了一个新的叔叔叫做 Bob。（***当然，将 domain.tld 部分更改为您正在使用的域名...）

但我最喜欢这篇文章的部分是能够通过正则表达式 OR（|）将多个站点合并到此 CORS "hack" 中，方法如下：

允许多个站点：

SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=$0

这个修复方案真的让我大吃一惊，因为我之前遇到过类似的问题，与知识库远超过我关于Apache的Fortune 500公司的开发者合作时，无法解决这样的问题，除非他们通过调整Apache设置来解决。

这是解决那些CDN问题的灵丹妙药，使用无cookie（或几乎无cookie，如果您使用CloudFlare……）域名，以减少每个图像请求发送的带有cookie的不必要网络流量，只需由服务器像一个糟糕的盲约会一样轻易抛弃。

超级安全，超级优雅。太喜欢了：您不必向资源窃贼/热链接类型开放服务器带宽。

感谢这三个聪明才智的共同努力，以解决曾经被认为是无法通过.htaccess解决的问题，我从中拼凑出了这段代码：

@Noyo https://stackoverflow.com/users/357774/noyo

@DaveRandom https://stackoverflow.com/users/889949/daverandom

@pratap-koritala https://stackoverflow.com/users/4401569/pratap-koritala

0

我们在使用亚马逊 (AWS) S3 预签名 Post 时遇到了类似的标头问题，某些浏览器无法通过。

解决方案是告诉桶 CORS 暴露头文件 <ExposeHeader>Access-Control-Allow-Origin</ ExposeHeader>

更多细节请参见此答案：https://dev59.com/sWgu5IYBdhLWcg3wdGsb#37465080

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接