Rails + AWS CloudFront + CORS for AngularJS HTML模板

我正在部署一個使用AngularJS作爲我們的前端MVC框架的Rails 4應用程序，並且我想通過CDN部署我們的資產。在我的AngularJS路由JavaScript文件中調用asset_path時，在running into issues之後獲得正確指紋的URL後，我決定取消AssetSync寶石。爲了替換AssetSync，我想簡單地在我的Rails服務器上使用Amazon CloudFront來提供自己的靜態資產。這個偉大的工程爲我的CSS和JS文件，但不幸的是我遇到的問題CORS試圖爲我的HTML模板角爲一項資產：Rails + AWS CloudFront + CORS for AngularJS HTML模板

Chrome Dev Tools console output

任何想法，將不勝感激！

UPDATE 4/30：

我終於能得到我的Rails的服務器設置在this Github issue按照說明正確的「訪問控制允許來源」上與rack-cors gem資產標題。現在，當我運行curl從CloudFront獲取文件時，我看到了正確的標題。但是，當我運行curl發送OPTIONS請求時，我仍然收到403 Forbidden。看看下面的兩張截圖：

對資產的GET請求看起來不錯：

Curl GET Request

但選項請求不....

Curl GET Request

來源

2014-04-29 hunteros

您需要在您的S3存儲桶CORS策略上執行此操作。 –

@j_mcnally我沒有使用S3，而是從我的Rails服務器（託管在Heroku）提供資產 – hunteros

如果您使用您的rails服務器作爲您的雲端，您的rails應用程序需要將想要緩存的頭文件發送到雲端起源然後... –

我一直在問該解決方案几次，所以我想我會發布的信息爲我們工作在這裏。

看來，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標頭，因爲我們的資產前綴是在我們config/environments/production.rb設置爲/assets與以下（默認）線：

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。

來源

2015-02-19 19:00:45 hunteros

你將需要在您的雲端緩存行爲上啓用OPTIONS。

您可以在控制檯中通過選擇您的發行版，然後轉到行爲選項卡來執行此操作。

編輯默認緩存行爲，並啓用擴展動詞支持：

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

來源

2014-05-16 01:49:19 Cfstat

Rails + AWS CloudFront + CORS for AngularJS HTML模板

回答

相關問題