Heroku + CDN Cloudfront + 字体 - Firefox 错误

Posted 2023-03-03

【中文标题】Heroku + CDN Cloudfront + 字体 - Firefox 错误

【英文标题】：Heroku + CDN Cloudfront + Fonts - Firefox bugs

【发布时间】：2013-03-03 01:26:07

【问题描述】：

最近，我们将资产转移到 CDN Cloudfront 上。我们注意到 Firefox 上的表面已损坏。经过几分钟的搜索，这是一个CORS的故事。我们允许使用 Cloudfront 字段。

application_controller:

after_filter :set_access_control_headers

def set_access_control_headers
  headers['Access-Control-Allow-Origin'] = CDN_CLOUDFRONT
end

production.rb:

CDN_CLOUDFRONT = "http://xxx.cloudfront.net"

直到昨天为止，这一直很好。经过几次搜索和思考，我没有找到解决方案。

有什么想法吗？

【问题讨论】：

你检查过这个听起来相似的问题的答案吗？ ***.com/questions/12229844/…

问题听起来一样，但 CDN 提供商不同 -> 答案不同。

【参考方案1】：

我没有使用 Heroku 设置，但是 AFAIK（如 developer.mozilla.org 所示），标题 Access-Control-Allow-Origin 应该反映域的值，该域消耗来自CDN。

例如： 对于托管在http://mydomain.net 并使用来自http://wefe342r34r23.cloudfront.net 的资产的网站

headers['Access-Control-Allow-Origin'] = 'http://mydomain.net'

将允许 mydomain.net 通过http://wefe342r34r23.cloudfront.net 访问资产。换句话说，将CDN_CLOUDFRONT 替换为您网站的域名应该可以解决问题。

希望这会有所帮助。

P.S.：直到昨天我还不确定你的设置是如何工作的。 :)

PPS：将备用域名 (CNAME) 添加到您的 CDN 将在您希望快速丢弃通过 http://xxx.cloudfront.net 公开的现有分发并开始使用新分发 @987654326 的情况下为您提供帮助@。如果您在这种情况下使用 备用域名（例如 http://cdn.mydomain.net），则无需更改应用程序代码库中的任何内容。

【讨论】：

这个标题应该在资产查询中设置吧？还是在 html 查询上？我正在努力解决这个问题 (and I'm not the only one)，所以如果您能详细说明一下，将不胜感激！

【参考方案2】：

这是我在另一个 Stack Exchange 页面上发布的与同一主题相关的内容的副本，如果其他人遇到相同的问题但没有找到正确的答案，我将离开此页面。

我在 Heroku 上使用 Rails 3 应用时遇到了同样的问题； Font-Awesome 图标没有显示，因为我通过 Sumo CDN 运行我的资产。

有几个与此相关的回复，其中之一是在您的 application_controller 中放置一个 after_filter 以设置标头值（通过 freemanoid），但这对我不起作用，我不得不使用建议的自定义中间件彼得马克伦德。

这两种解决方案都在 Rails 3.1 版本下发布： How to set access-control-allow-origin in webrick under rails?

【参考方案3】：

我使用的解决方法 - 将字体单独上传到 S3 并在存储桶上设置 cors 配置。将字体链接硬编码到 S3 字体。 所有资产（字体除外）都将来自 cloudfront - 您的字体将来自 S3。 它很丑 - 但它有效....

【讨论】：

除非您正确配置 Cloudfront 以转发 Cors 标头，否则这将不起作用。