Cloudfront CORS阻止字体 [英] Cloudfront CORS blocking fonts

问题描述

除字体外的所有资产都很好地加载，
，每当我访问网站时，我都会不断收到这样的消息：

以
访问字体'

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

为此目的，我什至将 rack-cors 包含在项目中的初始化程序中，但没有运气。

 如果已定义？ Rack :: Cors 
 Rails.configuration.middleware.insert_before 0，Rack :: Cors do 
允许
来源'*'
资源'/ assets / *'，标头： ：any，方法：[：get，：post，：delete，：put，：patch，：options，：head]，max_age：0 
 end 
 end 
 end 
  

为什么会这样，我该如何解决？

解决方案

从5.0版开始，导轨可为资产设置自定义HTTP标头，而您不会不必添加 font_assets gem之类的依赖项。为了将 Access-Control-Allow-Origin 设置为您的字体，只需将以下代码添加到 config / environments / production.rb ：

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

于2018年7月25日更新：

标头值也可以是特定域，如下所示：

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

All the assets except for the fonts load nicely, and whenever I go to my site I keep getting messages like this one:

Access to Font at 'https://xxxxxxxxxx.cloudfront.net/assets/fontawesome-webfont.woff2' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access.

As you can see CURL command indicates that no headers are present.

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==

Here's AWS Origin configuration

And this is the behaviour that includes the above origin:

I even included rack-cors to the initializers within the project for the purpose but with no luck.

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

Why is this so and how can I fix it? Thank you in advance.

解决方案

As of version 5.0, Rails allows for setting custom HTTP Headers for assets and you don't have to add dependencies like the font_assets gem. In order to set Access-Control-Allow-Origin to your font, just add the following codde to config/environments/production.rb:

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

Update on 07/25/2018:

The header value could also be a specific domain, like the following:

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

这篇关于Cloudfront CORS阻止字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！