Rails + Cloudfront - 没有Access-Control-Allow-Origin标头

Question

所以我配置了Ruby on Rails应用程序，将CloudFront用作CDN。 JavaScript，CSS＆amp;图像资产似乎通过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）提供的。

Answer 1

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

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

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

有趣的事实：CORS是专门为阻止人们从'字体工厂'访问/下载字体而开发的......

Answer 2

这是示例Rails 5.2应用程序，该应用程序通过CloudFront提供自定义字体。它使用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将缓存。