Font Awesome 图标未在 Chrome 中显示，这是一个与 MaxCDN 相关的跨域资源共享策略问题 [英] Font Awesome icons not showing in Chrome, a MaxCDN related Cross-Origin Resource Sharing policy issue

问题描述

刚刚在几个网站上注意到 Google Chrome 中显示了字体真棒图标.控制台显示以下错误:

just noticed on several websites that the font awesome icons aren's showing in Google Chrome. The console shows the following error:

来自 'http://cdn.keywest.life' 的字体已被阻止通过跨源资源共享策略加载:否请求中存在Access-Control-Allow-Origin"标头资源.Origin 'http://www.keywest.life' 因此不是允许访问.

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 引用替换为以下内容来轻松解决:

I found the exact same issue on several other sites. This can be easily fixed by replacing the own CDN reference with:

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

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

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

-however, this is not the solution, just a workaround. I would love to know the reason and the right solution.

(原因是:该网站正在使用它自己的 CDN，由 MaxCDN 提供，并且引用了字体很棒的字体，这些不是由 Chrome 加载的，如果您从 Bootstrapcdn 资源加载相同的资源 - 提到上面 - 它有效)

(the cause is this: the website is using it's own CDN, provided by MaxCDN and has the reference to the font awesome fonts and these are not loaded by Chrome, if you are loading the same resource from the Bootstrapcdn resource -mentioned above- it works)

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

here is a n example of the issue (in the menu and the social icons in footer: http://www.keywestnight.com/fantasy-fest )

感谢您的帮助/解释！

推荐答案

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

这篇关于Font Awesome 图标未在 Chrome 中显示，这是一个与 MaxCDN 相关的跨域资源共享策略问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！