Cloudfront CORS阻止字体 | CORS阻止字体

本文介绍了Cloudfront CORS阻止字体的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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阻止字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！