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

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