Rails + AWS CloudFront + CORS 用于 AngularJS HTML 模板答案

【问题标题】：Rails + AWS CloudFront + CORS for AngularJS HTML templatesRails + AWS CloudFront + CORS 用于 AngularJS HTML 模板
【发布时间】：2014-06-16 03:20:57
【问题描述】：

我正在部署一个使用 AngularJS 作为前端 MVC 框架的 Rails 4 应用程序，我想通过 CDN 部署我们的资产。在running into issues 在我的AngularJS 路由javascript 文件中调用asset_path 时获得正确的指纹URL 之后，我决定消除AssetSync gem。要替换 AssetSync，我想简单地在我的 Rails 服务器上使用 Amazon CloudFront，以提供自己的静态资产。这对我的 CSS 和 JS 文件非常有用，但不幸的是，我在尝试将 Angular 的 HTML 模板作为资产提供时遇到了 CORS 问题：

任何想法将不胜感激！

更新 4/30：

按照this Github issue 中的说明，我终于能够让我的Rails 服务器在rack-cors gem 的资产上设置正确的“Access-Control-Allow-Origin”标头。现在，当我运行 curl 从 CloudFront 获取文件时，我看到了正确的标题。但是，当我运行 curl 发送 OPTIONS 请求时，我仍然收到 403 Forbidden。看看下面的两张截图：

资产的 GET 请求看起来不错：

但是 OPTIONS 请求没有....

【问题讨论】：

您需要在您的 S3 存储桶 CORS 策略中执行此操作。
@j_mcnally 我没有使用 S3，而是从我的 Rails 服务器（托管在 Heroku）提供资产
如果您将 Rails 服务器用作云端源，那么您的 Rails 应用程序需要将它想要缓存的任何标头发送到云端...
@j_mcnally 不幸的是，从 Rails 应用程序获取正确的标头不起作用。查看我昨天添加到问题中的更新 - 来自 CloudFront 的 GET 的标题存在，但 OPTIONS 请求（Chrome/Firefox 在 GET 之前执行）返回 403 Forbidden。到目前为止，我发现的所有链接似乎都表明 CloudFront 无法执行我想要的操作，但希望有人解决了这个问题。
您的 Rails 应用程序是否响应选项请求？

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

【解决方案1】：

您需要在云端缓存行为上启用 OPTIONS。

您可以在控制台中执行此操作，方法是选择您的发行版，然后转到“行为”选项卡。

编辑默认缓存行为并启用扩展动词支持：

Allowed HTTP Methods
GET, HEAD, PUT, POST, PATCH, DELETE, OPTIONS

【讨论】：

【解决方案2】：

我被问过几次这个解决方案，所以我想我会在这里发布对我们有用的解决方案。

Rails 似乎只会为 CSS 和 JS 文件正确设置 CORS 标头。但是，您可以使用 rack-cors gem 为资源设置自定义标头。我们在config/application.rb中添加了以下配置：

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

我们只能在我们的资产上设置 CORS 标头，因为我们的资产前缀设置为 /assets，config/environments/production.rb 中有以下（默认）行：

config.assets.prefix = "/assets"

要完成 AWS CloudFront 配置，请遵循 @Cfstat 在 his answer 中的建议，并确保您已编辑 AWS CloudFront 上的默认缓存行为以启用扩展动词支持。将Allowed HTTP Methods 设置为包括GET 和OPTIONS。

让所有这些工作的最后一点配置是将您的资产主机设置为指向 AWS CloudFront。我们想使用环境变量，所以我们在config/environments/production.rb 中使用了以下行：

config.action_controller.asset_host = "//#{ENV['ASSET_HOST']}"

然后我们只需将 ASSET_HOST 环境变量设置为指向我们的 CloudFront URL。

【讨论】：