通过 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 和字体的页面，但似乎没有一个与我的案例相关（尽管这可能是因为我没有完全理解这个问题）。感谢任何想法或参考。

Answer 1

我认为这是对 CORS 问题的一个很好的解释，可以充分理解这个概念 - How does Access-Control-Allow-Origin header work?

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 and images is not loaded in ruby-on-rails-4 production firefox

这篇文章解释了几种为 rails 跟踪此问题的方法 - How to display Font Awesome icons in Firefox?