ruby-on-rails - Rails Assets Cloudfront fontawesome CORS

标签 ruby-on-rails cors font-awesome amazon-cloudfront

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

我正在使用 font-awesome-rails我预编译我的 Assets 以进行生产。
我已经在我的生产配置中为我的 Assets 设置了 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.

我已经尝试过:
  • 添加 gem rack-corschange my config.ru没有成功
  • 设置一个 after_filterset the server headers没有成功
  • Create an invalidation on CloudFront对于三个没有成功的 fontawesome 文件


  • 一种解决方法是删除 fontawesome gem 并改为使用:
    <%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css", :media => "all" %>
    

    但我更愿意找到问题所在。

    谢谢

    最佳答案

    我遇到了这个问题,并通过进行以下更改解决了。首先,在你的 http 服务器上设置一个 header 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

    关于ruby-on-rails - Rails Assets Cloudfront fontawesome CORS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33003567/

    相关文章:

    html - 如何更改 fa-border 中的文本字体?

    ruby-on-rails - 删除多态关联

    ruby-on-rails - 子域中的 Rails url 助手 - 删除子域

    Angular - 单击更改 Font Awesome 图标颜色

    javascript - Ionic 3 中的 CORS hell

    node.js - Keystone JS CORS

    css - 我可以只使用 FA 的 CSS 和 SVG 文件还是需要 .EOT、.TTF 和 .OFF?

    ruby-on-rails - 在 Rails 中,如何记录每个传入 HTTP 请求的全部内容?

    ruby-on-rails - Rails link_to 解释 :class and :style as params for the :action?

    javascript - 如何从浏览器向 Node.js 服务器发送大文件?