（一些）webfonts 不使用 Heroku 通过 Cloudfront 加载

Question

我在 Rails 上使用 Ruby 在 Heroku 上托管一个网站。它使用 Cloudfront 分发来提供资产，并使用 S3 来存储图像。

当转到 http://example.com 时，除了 2 个网络字体外，一切正常。所有其他字体加载正常。

当去 http://www.example.com, none 的 webfonts 加载。

has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.

我使用的是普通的 Cloudfront 资产主机 d12345.cloudfront.net，但我想如果我切换到 assets.example.com，我会解决 CORS 问题。但我仍然得到：

Access to Font at 'http://assets.example.com/assets/myfont-Bold-735639b52225ec60e258c2b8b193dfb479f6158c3738a595db04f3a9684a4ad8.woff' from origin 'http://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.

```

我已经阅读了无数关于这个问题的讨论帖、博文和 SO 答案，但我似乎无法弄明白。

我在我的 rails 应用程序中设置 Rack::Cors 如下：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '/assets/*', headers: :any, methods: [:get]
  end
end

我的 asset_host 设置正确：

CLOUDFRONT_HOST = "http://assets.example.com"
config.action_controller.asset_host = CLOUDFRONT_HOST

所有其他资产都运行良好。图片 JavaScript、CSS 全部来自 CloudFront，没有任何问题。进入 www.example.com 子域时只有 2 种网络字体，而进入根级站点时只有 2 种网络字体 example.com.

我在 Cloudfront 和 S3 管理面板中尝试了很多选项：

已将 cors 配置添加到我的存储桶
在我的云端分配

但似乎没有任何效果。我不知道为什么这 2 种字体无法正确加载而其他一切正常。

Answer 1

字体通常由您的浏览器预检检查，并发出 OPTIONS 请求。在您的 CORS 设置中，除了 GET 之外，还尝试允许 OPTIONS。您可能还必须在 CloudFront 分配上允许 OPTIONS。

请注意，如果这些字体在请求中有查询参数 url，如 assets.example.com/font.woff?v=123，CloudFront 分配也应转发查询参数。

（一些）webfonts 不使用 Heroku 通过 Cloudfront 加载

(Some) webfonts not loading through Cloudfront using Heroku

ruby-on-rails

heroku

amazon-s3

amazon-cloudfront