Rails + Cloudfront - 不存在 Access-Control-Allow-Origin header

Question

所以我在 Rails 应用程序上配置了我的 Ruby 以使用 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 上将以下内容列入白名单 headers。顺便说一句，这些字体是从我的 Rails 服务器（而不是 S3）提供的。

Answer 1

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

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

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

有趣的事实：CORS 的开发是专门为了阻止人们使用来自 'font factories' 的 accessing/downloading 字体...

Answer 2

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

https://github.com/nzoschke/edgecors

首先需要配置CloudFront转发浏览器Originheader.

接下来使用 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 header 并将 Access-Control-Allow-Origin: https://edgecors.herokuapp.com header 添加到响应中（如果它在白名单中）。

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

Rails + Cloudfront - 不存在 Access-Control-Allow-Origin header

Rails + Cloudfront - No Access-Control-Allow-Origin header is present

ruby-on-rails

cdn

cors

amazon-cloudfront