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

Question

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

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 引用替换为以下内容可以轻松修复此问题:

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

以下是允许从所有域访问网络字体的工作方法:

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