Chrome 说“没有找到 Access-Control-Allow-Origin 标头”但是 curl 在使用 cloudfront 字体时显示“Access-Control-Allow-Origin 标头”答案

【问题标题】：Chrome saying "No Access-Control-Allow-Origin header found" But curl is showing 'Access-Control-Allow-Origin header' while using cloudfront for fontsChrome 说“没有找到 Access-Control-Allow-Origin 标头”但是 curl 在使用 cloudfront 字体时显示“Access-Control-Allow-Origin 标头”
【发布时间】：2017-11-20 04:47:39
【问题描述】：

之前我使用 heroku 来服务器静态资产。然后我决定使用 cloud front 为 heroku 上的 rails(5.0.2) 应用程序提供静态资产。配置后一切似乎都很好，但是对于字体，chrome 抛出了这个错误。

Access to Font at 'https://eeeeeee.cloudfront.net/assets/fontawesome-webfont-18e6b5ff511b90edf098e62ac45ed9d6673a3eee10165d0de4164d4d02a3a77f.woff?v=3.2.1' from origin 'https://staging-example.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://staging-example.herokuapp.com' is therefore not allowed access.

我用谷歌搜索了这个问题，并在这里找到了一些信息“Cloudfront CORS issue serving fonts on Rails application”。根据第一个答案，我遵循了所有步骤。我的摇滚配置是

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins %w[
            https://staging-example.herokuapp.com
            http://staging-example.herokuapp.com
          ]
    resource '/assets/*'
  end
end

在 application.rb 中我仍然遇到这个问题

Access to Font at 'https://eeeeeee.cloudfront.net/assets/fontawesome-webfont-18e6b5ff511b90edf098e62ac45ed9d6673a3eee10165d0de4164d4d02a3a77f.woff?v=3.2.1' from origin 'https://staging-example.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://staging-example.herokuapp.com' is therefore not allowed access.

使用 curl 查找标题我得到了这个当点击我的网址时

curl -H "Origin: https://staging-example.herokuapp.com" -I https://staging-example.herokuapp.com/assets/fontawesome-webfont-18e6b5ff511b90edf098e62ac45ed9d6673a3eee10165d0de4164d4d02a3a77f.woff?v=3.2.1
HTTP/1.1 200 OK
Server: Cowboy
Date: Sat, 17 Jun 2017 13:49:11 GMT
Connection: keep-alive
Access-Control-Allow-Origin: https://staging-example.herokuapp.com
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 1728000
Access-Control-Allow-Credentials: true
Last-Modified: Tue, 02 May 2017 11:13:21 GMT
Content-Type: application/font-woff
Vary: Origin
Content-Length: 43572
Via: 1.1 vegur

直接点击cdn url时

curl -H "Origin: https://staging-example.herokuapp.com" -I https://eeeeeee.cloudfront.net/assets/fontawesome-webfont-18e6b5ff511b90edf098e62ac45ed9d6673a3eee10165d0de4164d4d02a3a77f.woff?v=3.2.1
HTTP/1.1 200 OK
Content-Type: application/font-woff
Content-Length: 43572
Connection: keep-alive
Server: Cowboy
Date: Sat, 17 Jun 2017 13:19:04 GMT
Access-Control-Allow-Origin: https://staging-example.herokuapp.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Max-Age: 1728000
Access-Control-Allow-Credentials: true
Last-Modified: Tue, 02 May 2017 11:13:21 GMT
Via: 1.1 vegur, 1.1 21e1fe3458bce196f8eb1701ebbbce53.cloudfront.net (CloudFront)
Vary: Origin
Age: 2023
X-Cache: Hit from cloudfront
X-Amz-Cf-Id: zFXm3g53TJ4Nm6a9oH0yjVq-KUvvPoQI1chz_XN8nnaEd-p-TtQPNg==

很明显，标题存在，那么为什么 chrome 会抛出该错误。请帮忙。

【问题讨论】：

您不一定可以使用 curl 进行测试并假设 Chrome 得到了相同的响应。使用 Chrome 发出请求，捕获响应标头，然后查看您的观察结果。请特别注意来自 curl 和 Chrome 的多个请求中 Age:、Last-Modified: 和 X-Cache: 的差异。
您找到问题的答案了吗？

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

【解决方案1】：

您需要将预检标头添加到您的 application_controller.rb ：

  before_action :cors_set_access_control_headers


  def cors_set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, PATCH, OPTIONS'
    headers['Access-Control-Request-Method'] = '*'
    headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
  end

【讨论】：