在Chrome浏览器中未显示Font Awesome图标，MaxCDN相关的跨源资源共享政策问题

刚刚在几个网站上发现该字体超棒图标未在Google Chrome中显示。控制台显示以下错误：在Chrome浏览器中未显示Font Awesome图标，MaxCDN相关的跨源资源共享政策问题

Font from origin ' http://cdn.keywest.life ' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://www.keywest.life ' is therefore not allowed access.

我在其他几个网站上发现了完全相同的问题。这可以通过用替换自己CDN参考容易地固定：

-however，这不是解决方案，只需一种解决方法。我很想知道原因和正确的解决方案。

（原因是这样的：网站使用它自己的CDN，由MaxCDN提供，并且引用字体真棒字体，并且这些不会由Chrome加载，如果您从Bootstrapcdn资源加载相同的资源 - 上文提到它的工作原理）

这里是问题的一个例子（在菜单和页脚的社会图标：http://www.keywestnight.com/fantasy-fest）

感谢您的帮助/ explanatioon！

来源

2014-09-30 Yatko

[来自原点的字体已被阻止加载“跨源资源共享”策略]（http：// stackoverflow。com/questions/25577981 /字体从原产地已被阻止从加载由交叉来源资源共享 – leymannx 2017-04-28 18:45:39

这里的工作方法，以允许从所有域进行访问的网络字体：

# Allow access from all domains for webfonts. 
# Alternatively you could only whitelist your 
# subdomains like "subdomain.example.com". 
<IfModule mod_headers.c> 
    <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css|css)$"> 
    Header set Access-Control-Allow-Origin "*" 
    </FilesMatch> 
</IfModule>

来源

2014-10-23 05:07:50 Yatko

这里是（目前）完美的.htaccess示例窗体MaxCDN：http://support.maxcdn.com/htaccess-example-collection/ – Yatko 2014-10-23 05:09:11

链接不起作用 – 2015-02-17 09:27:33

我们需要在哪里添加此代码？ – simon 2015-06-15 05:19:04

问题不在于CSS文件，它与字体文件的提供方式有关。该font-awesome.min.css文件具有类似于

@font-face{font-family:'FontAwesome'; 
src:url('../fonts/fontawesome-webfont.eot?v=4.2.0'); 
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') 
format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff?v=4.2.0') 
format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.2.0') 
format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg'); 
font-weight:normal; 
font-style:normal}

这导致浏览器从相同的服务器作为CSS文件请求适当的字体文件（EOT，WOFF，TTF或SVG）线。这是合乎逻辑和正确的。

但是，当浏览器请求来自cdn.keywest.life的字体文件时，它将读取Access-Control-Allow-Origin标头的标头，并且找不到一个标头，因此它会给出该错误消息。（这对我来说似乎是一个浏览器错误，因为它来自与CSS文件相同的服务器）。

而是，当您使用maxcdn.bootstrapcdn.com时，响应包括Access-Control-Allow-Origin:*标题，浏览器接受此字体文件。如果你的cdn服务器包含这个头文件，那么它也可以工作。

如果你有一个Apache服务器，看到这个答案：Font-awesome not properly displaying on Firefox/how to vend via CDN?

来源

2014-10-15 23:34:29

谢谢@Brent Washburne，这帮助我找出方法形式MaxCDN！ – Yatko 2014-10-23 05:10:37

的答案都不为我工作，我不得不在maxcnd back office上创建一个边缘规则（这会更改你所在区域的配置文件）

来源

2015-04-02 15:50:23

您可以告诉您为完成这项工作所执行的步骤。我遇到同样的问题，但我正在使用AWS Cloudfront cdn和W3 Total缓存插件。 – 2017-05-07 07:57:08

我使用CDN不允许我修改它的响应，所以我修改font-awesome.min.css，以绝对路径代替相对路径和它的工作。