Cloudfront CORS阻止字体

Question

除了字体之外的所有资产加载得很好,每当我访问我的网站时,我都会收到这样的消息:

从' https://example.com ' 访问' https://xxxxxxxxxx.cloudfront.net/assets/fontawesome-webfont.woff2 '中的字体已被CORS政策阻止:没有'访问控制 - 允许 - 来源'标头出现在请求的资源上.因此,不允许来源" https://example.com "访问.

如您所见,CURL命令指示不存在标头.

curl -H "Origin: https://example.com" -I https://xxxxxxxxx.cloudfront.net/assets/fontawesome-webfont.woff2
HTTP/1.1 200 OK
Content-Length: 77160
Connection: keep-alive
Status: 200 OK
X-Rack-Cache: stale, valid, store
Cache-Control: public, must-revalidate
Date: Fri, 14 Apr 2017 08:01:26 GMT
X-Content-Digest: d6f48cba7d076fb6f2fd6ba993a75b9dc1ecbf0c
ETag: "2adefcbc041e7d18fcf2d417879dc5a09997aa64d675b7a3c4b6ce33da13f3fe"
X-Runtime: 0.366713
X-Request-Id: 87c9d883-e443-4756-86f9-66b40ed573f6
X-Powered-By: Phusion Passenger Enterprise 5.1.2
Server: nginx/1.10.2 + Phusion Passenger 5.1.2
Via: 1.1 vegur, 1.1 f0eecbf6390179377707b707ebaa1e8b.cloudfront.net (CloudFront)
Age: 86645
Vary: Accept-Encoding
X-Cache: Hit from cloudfront
X-Amz-Cf-Id: FNjQGvROcAdqT6u6PaN3OgEE34mnSsixHNm6WqzWq2boWWYYzVmZPw==

这是AWS Origin配置

这是包含上述来源的行为:

我甚至为项目中的初始化程序包括了机架,但没有运气.

if defined? Rack::Cors
  Rails.configuration.middleware.insert_before 0, Rack::Cors do
    allow do
      origins '*'
      resource '/assets/*', headers: :any, methods: [:get, :post, :delete, :put, :patch, :options, :head], max_age: 0
    end
  end
end

为什么会这样,我该如何解决？先感谢您.

Answer 1

从5.0版本开始,Rails允许为资产设置自定义HTTP标头,您不必添加像font_assetsgem 这样的依赖项.要设置Access-Control-Allow-Origin为您的字体,只需将以下codde添加到config/environments/production.rb:

config.public_file_server.headers = {
  'Access-Control-Allow-Origin' => '*'
}

更新于07/25/2018:

标头值也可以是特定域,如下所示:

config.public_file_server.headers = {
  'Access-Control-Allow-Origin' => 'https://www.example.org'
}