如何在通过CDN部署字体时解决CORS问题

Question

我已成功地在Rails应用程序中使用fontawesome一段时间。

最近我尝试将我的资产分发到CDN，但在使用Chrome和Firefox时遇到了CORS问题。

现在我已经在production.rb中添加了以下内容，在Chrome中似乎已经解决了这个问题。

config.action_dispatch.default_headers.merge!({
  'Access-Control-Allow-Origin' => 'path.to.my.app',
  'Access-Control-Request-Method' => '*'
}) 

我有两个问题：

1. 如何确保此标题仅应用于字体文件（例如，如果我正在使用 .htaccess 文件，我会执行像 <FilesMatch "\.(ttf|otf|eot|woff|svg)$"> 这样的操作，如何在 Rails 中实现此操作，并且是否建议这样做？）

2. 上述内容似乎未解决 Firefox 中的 CORS 问题（至少我仍然看到 fontawesome 图标的位置出现了“缺失字体”的空白方块）。Firefox 有特殊要求吗？如果是这样，是什么要求？

我在网上找到了许多关于 CORS、CDN、Rails 和字体的页面，但似乎都与我的情况无关（虽然这可能是因为我没有完全理解问题）。感谢提供任何想法或参考资料。

- Andy Harvey

Answer 1

我认为这是一个很好的关于CORS问题的解释，以充分理解这个概念 - Access-Control-Allow-Origin头部是如何工作的?

Access-Control-Allow-Origin是一个CORS（跨源资源共享）头部。

当站点A尝试从站点B获取内容时，站点B可以发送Access-Control-Allow-Origin响应头来告诉浏览器该页面内容可被某些来源访问。（一个来源是指一个域名加上协议和端口号）。默认情况下，站点B的页面不可被其他任何来源访问；使用Access-Control-Allow-Origin头部打开了特定请求来源的跨源访问门户。

关于在Rails中具体解决这个问题 - 我读到这个库做得很好 -

https://github.com/cyu/rack-cors

您可能已经看到了这个问题，但我认为这里的最后一个答案可能会有所帮助 - font-awesome和图像在ruby-on-rails-4生产火狐浏览器中未加载

这篇文章解释了几种解决rails中此问题的方法 - 如何在Firefox中显示Font Awesome图标？

- Paul John

---

感谢@paul，我确实尝试了rack-cors，但后来换掉了，因为似乎没有解决问题。在我的问题中添加配置代码已经解决了Chrome和Safari中的问题——字体现在显示正常了。但是Firefox仍然无法显示fontawesome字体。我不确定为什么Firefox会与其他浏览器表现不同...? - Andy Harvey

你好 @AndyHarvey，你有nginx配置文件吗？ - Paul John

有没有办法可以尝试一下这个... http://stackoverflow.com/questions/15080434/how-to-display-font-awesome-icons-in-firefox - Paul John