Rails资产Cloudfront fontawesome CORS

Question

我在stackoverflow/github上尝试了很多解决这个问题的解决方案,但我无法让它工作.

我正在使用font-awesome-rails而且我预编译了我的资产以进行生产.我在生产配置中为我的资产设置了CloudFront:

config.action_controller.asset_host = "https://XXXX.cloudfront.net"

当我加载页面时(来自Chrome/Firefox,因为Safari可以使用CORS),我收到以下常见错误消息:

Font from origin 'https://XXXX.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access.

---

我已经尝试过:

1. 添加gem rack-cors并更改我的config.ru但没有成功
2. 设置after_filter为设置服务器标头但未成功
3. 在CloudFront上为三个fontawesome文件创建失效,但没有成功

---

解决方法是删除fontawesome gem并改为使用:

<%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css", :media => "all" %>

但我宁愿找到问题.

谢谢

Answer 1

我遇到过这个问题，通过执行以下更改解决了这个问题。首先，在你的http服务器上设置一个标头 add_header Access-Control-Allow-Origin *;

使用的完整配置：

location ~* \.(ttf|ttc|otf|eot|woff|woff2|svg|font.css)$ {
  add_header Access-Control-Allow-Origin *;
  expires max;
  allow all;
  access_log off;
  add_header Cache-Control "public";
}

然后在 Cloudfront 上创建失效。

ps：我没有使用rack-cors或任何其他gem