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. 添加rack-cors宝石并更改我的config.ru文件，但没有成功。
2. 设置一个after_filter来设置服务器头信息，但没有成功。
3. 针对三个fontawesome文件在CloudFront上创建无效ation，但没有成功。

---

一种解决方法是删除fontawesome宝石，改用：

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

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

谢谢

- ZazOufUmI

---

可能需要在AWS S3存储桶上添加CORS配置。 - typeoneerror

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上创建无效化。

注：我没有使用rack-cors或其他gem包。

- Thales Ribeiro

---

我们应该把这段代码放在哪里？是放在 production.rb 还是 initializer 中？ - Shalafister's

@Shalafister 这些是 nginx 网络服务器的配置。 - Cyzanfar

谢谢您的回答。如果能解释每一行代码，那就更好了。我不确定除了 add_header Access-Control-Allow-Origin * 之外，其他代码是否都是必需的来实现目标。 - Peter P.

Answer 2

这个解决方案适用于我：

您的 Bucket > 权限 > CORS 配置，并粘贴以下配置：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

在你的 Rails 项目中：

> vim environments/production.rb

添加：

if ENV['CLOUDFRONT_ENDPOINT']
    config.action_controller.asset_host = proc { |source|
      if source =~ /^.*?\.(eot|ttf|woff|svg|otf)$/
        '//mydomain.com'
      else
        ENV.fetch('CLOUDFRONT_ENDPOINT') { 'https://cloudfrontname3244d4.cloudfront.net' }
      end
    }
end

- Gil Perez