Cloudfront CORS 阻止字体答案

【问题标题】：Cloudfront CORS blocking fontsCloudfront CORS 阻止字体
【发布时间】：2017-09-10 14:30:42
【问题描述】：

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

在以下位置访问字体 'https://xxxxxxxxxx.cloudfront.net/assets/fontawesome-webfont.woff2' 来自原点“https://example.com”已被 CORS 策略阻止：否 'Access-Control-Allow-Origin' 标头出现在请求的资源。因此不允许使用原点“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 配置

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

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

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

为什么会这样，我该如何解决？提前谢谢你。

【问题讨论】：

如您所见，CURL 命令指示不存在任何标头。 您可以也从标头中看到，此请求未通过完全通过 CloudFront，因为 X-Amz-Cf-Id: ...、Via: ...cloudfront.net 和 X-Cache: ... from cloudfront 标头都丢失了，并且这些标头都不能被禁用。目前，CloudFront 不是造成此问题的因素。
@Michael-sqlbot 我更新了帖子。现在我有了这些标题。下一步我能做什么？
看起来你修复了错误的东西，那里。 CloudFront 不在循环中，所以我的评论的重点是您没有 CloudFront 问题——问题出在其他地方：您的应用程序没有返回必要的 CORS 响应标头。将 CloudFront 带入循环会使您的故障排除变得复杂，因为现在您无法看到更改对您的应用程序的影响 - 此响应基于 Age: 标头，是 24 小时前的。禁用缓存并在 * 上运行缓存失效。
Rails Passenger Glyphicon CORS Cloudfront NGINX Issue的可能重复
运气好@BillyLogan？我也有同样的问题...

标签： ruby-on-rails heroku passenger cdn amazon-cloudfront

【解决方案1】：

我认为最常见的解决方案是使用font_assets gem。配置非常简单。在config/environments/production.rb 添加这个

config.font_assets = "http://YOUR_ASSET_HOST"

很遗憾，我无法更详细地解释这一点，但这就是我们在项目中使用的，而且效果很好。

【讨论】：

它与 Rails 5 兼容吗？
不知道。自述文件说它适用于 Rails 3.1，但它也适用于 Rails 4.2，所以你可以试一试。

【解决方案2】：

从 5.0 版开始，Rails allows for setting custom HTTP Headers for assets 并且您不必添加像 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'
}

【讨论】：

能否将“Access-Control-Allow-Origin”用于特定域而不是所有域 (*)？即'mydomain1.com，mydomain2.com'