Rails + Cloudfront - 不存在 Access-Control-Allow-Origin 标头答案

【问题标题】：Rails + Cloudfront - No Access-Control-Allow-Origin header is presentRails + Cloudfront - 不存在 Access-Control-Allow-Origin 标头
【发布时间】：2018-08-22 06:26:37
【问题描述】：

因此，我已将 Ruby on Rails 应用程序配置为使用 CloudFront 作为 CDN。 JavaScript、CSS 和图像资产似乎可以通过 CloudFront 正确提供，但字体因 CORS 问题而失败 -

Access to Font at 'https://abcdefghikl.cloudfront.net/assets/fonts/din-regularalternate-webfont-79090091223f0c54d7042ef125ad4f26.ttf' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://myapp.com' is therefore not allowed access.

知道如何解决这个问题吗？

我还在 AWS CloudFront 上将以下标头列入白名单。顺便说一句，字体是从我的 Rails 服务器（不是 S3）提供的。

【问题讨论】：

您是否将 CloudFront 配置为将 CORS 请求标头列入原始服务器的白名单？这些字体在哪里？在您的服务器上、S3 上还是其他地方？
@Michael-sqlbot 回答了您的问题...

标签： ruby-on-rails cors amazon-cloudfront cdn

【解决方案1】：

这是一个通过 CloudFront 提供自定义字体的示例 Rails 5.2 应用程序。它使用 Edge addon 在 Heroku 上运行，但适用于任何 Rails / CloudFront 设置。

https://github.com/nzoschke/edgecors

首先您需要配置 CloudFront 以转发浏览器 Origin 标头。

接下来使用rack-cors gem 并将配置添加到您的Rails config/application.rb：

module EdgeCors
  class Application < Rails::Application
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins %w[
          http://edgecors.herokuapp.com
          https://edgecors.herokuapp.com
        ]
        resource '/assets/*', headers: :any, methods: [:get, :post, :options]
      end
    end
  end
end

将源白名单更改为您的网站 URL。

现在来自https://edgecors.herokuapp.com 对https://abcdefghikl.cloudfront.net/assets/fonts/din-regularalternate-webfont-79090091223f0c54d7042ef125ad4f26.ttf 字体的请求将被发送回原始Rails 应用程序。

中间件内省Origin 标头，如果在白名单中，则将Access-Control-Allow-Origin: https://edgecors.herokuapp.com 标头添加到响应中。

然后浏览器将愉快地加载字体。 CloudFront 会缓存。

【讨论】：

【解决方案2】：

快速回答 - 你不能。这需要在服务器端进行更改 - 您无法在客户端（浏览器）代码中执行任何操作。 CORS 仅适用于 AJAX 请求（在后台使用 fetch）和字体。

但如果服务器端在您的控制之下，请检查您是否在 Rails 服务器的响应中明确添加 CORS 响应标头（Access-Control-Allow-Origin 等）。

如果没有，您需要将它们实际添加到响应中（在 Rails 服务器或 CDN 本身中）。将它们列入白名单只是允许它们通过（并且可能会影响缓存），但它们需要显式添加到响应中

有趣的事实：CORS 专门用于阻止人们从“字体工厂”访问/下载字体...

【讨论】：

鉴于 OP 声明他已“将我的 Ruby on Rails 应用程序配置为使用 CloudFront 作为 CDN” ...我有理由确定他正在尝试访问 他自己的内容通过 CloudFront。因此，他实际上是自己托管它并控制服务器端。
迈克尔是对的。您的回答对我没有帮助，我知道只有在客户手中才能绕过 CORS。除了历史琐事之外很酷:)
好的，您是否在 Rails 服务器的响应中明确添加了 CORS 响应标头（Access-Control-Allow-Origin 等）？如果没有，您需要将它们实际添加到响应中（在 Rails 服务器或 CDN 本身中）。将它们列入白名单只是允许它们通过（并且可能会影响缓存），但需要将它们显式添加到响应中。
谢谢@SteveRobinson :)