google chrome - not - Chrome中未显示Font Awesome图标,这是与MaxCDN相关的跨域资源共享政策问题



cors测试 (4)

对于许多人来说,访问字体真棒资产的问题一直困扰着他们,而没有对该问题的全面解释和解决方案。

什么是CORS:

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

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

问题:

问题源于如何加载真棒字体。

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

解决方案:

虽然已在文件存储(例如S3)上创建了CORS规则,并且已将资源访问权授予了相关域,但是当CDN尝试加载CSS中指定的字体时,加载这些字体时指定的来源/域即为CDN,但未向CDN域授予CORS访问权限。

为CDN域创建一个CORS规则。

刚在几个网站上注意到,谷歌浏览器中没有显示字体真棒图标。 控制台显示以下错误:

跨域资源共享策略已阻止加载来源“ 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

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

(原因是这样的:如果您要从上述的Bootstrapcdn资源加载相同的资源,则网站使用的是自己的CDN,该网站由MaxCDN提供,并且引用了字体真棒字体,Chrome不会加载这些字体。作品)

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

感谢您的帮助/解释!


我使用的CDN不允许我修改其响应,因此我修改了 font-awesome.min.css ,用绝对路径替换了相对路径,并且可以正常工作。


这是 允许从所有域访问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>

问题不在于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 ,响应 maxcdn.bootstrapcdn.com 包含 Access-Control-Allow-Origin:* 标头,并且浏览器会接受此字体文件。 如果您的CDN服务器包含此标头,那么它也将起作用。

如果您有Apache服务器,请参见以下答案: 真棒字体无法在Firefox上正确显示/如何通过CDN出售?





cross-domain-policy