适用于AngularJS HTML模板的Rails + AWS CloudFront + CORS

Question

我正在使用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日：

我终于能够让我的Rails服务器设置正确的访问控制允许来源＆＃39;按照rack-cors gem中的说明操作this Github issue的资产标题。现在，当我运行curl从CloudFront获取文件时，我看到了正确的标题。但是，当我运行curl发送OPTIONS请求时，我仍然会收到403 Forbidden。看看下面的两个截图：

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

但OPTIONS请求并不......

Answer 1

您需要在您的Cloudfront缓存行为中启用OPTIONS。

您可以在控制台中选择您的发行版，然后转到行为标签。

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

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

Answer 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配置，请在his answer中按照@ Cfstat的建议操作，并确保已在AWS CloudFront上编辑默认缓存行为以启用扩展动词支持。设置Allowed HTTP Methods以包含GET和OPTIONS。

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

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

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