字体真棒图标未在Chrome中显示,这与MaxCDN相关的跨源资源共享策略问题

Question

刚刚在几个网站上注意到,谷歌Chrome中显示的字体很棒.控制台显示以下错误:

来自" http://cdn.keywest.life "的字体已被跨源资源共享策略阻止加载:请求的资源上没有"Access-Control-Allow-Origin"标头.因此,不允许来源" http://www.keywest.life "访问.

我在其他几个网站上发现了完全相同的问题.通过使用以下代码替换自己的CDN引用,可以轻松解决此问题:

//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css

- 但是,这不是解决方案,只是一种解决方法.我很想知道原因和正确的解决方案.

(原因是:网站正在使用它自己的CDN,由MaxCDN提供,并且引用了字体非常棒的字体,如果你从上面提到的Bootstrapcdn资源加载相同的资源,这些字体不会被Chrome加载 - 它作品)

这是一个问题的例子(在菜单和页脚中的社交图标:http://www.keywestnight.com/fantasy-fest)

感谢您的帮助/解释!

Answer 1

以下是允许从webfonts的所有域进行访问的工作方法:

# 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>

Answer 2

问题不在于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服务器,请参阅以下答案:字体真棒没有在Firefox上正确显示/如何通过CDN进行销售？

Answer 3

对于许多人来说，访问字体真棒资产的问题一直是一个问题，没有对问题的全面解释和解决方案。

什么是 CORS：

跨域资源共享 (CORS) 是一种机制，它使用额外的 HTTP 标头让用户代理获得从与当前使用的站点不同的源（域）上的服务器访问所选资源的权限。当用户代理从不同于当前文档来源的域、协议或端口请求资源时，它会发出跨域 HTTP 请求。

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

问题：

问题源于 font-awesome 字体的加载方式。

@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) 加载。我们这里的情况是：

解决方案：

虽然 CORS 规则已在您的文件存储（例如 S3）上创建，并且资源的访问权限已授予相关域，但当 CDN 尝试加载 CSS 中指定的字体时，加载这些字体时指定的源/域是CDN 但没有给 CDN 域提供 CORS 访问权限。

为 CDN 域创建 CORS 规则。