Rails + AWS CloudFront + CORS for AngularJS HTML templates

4
votes

I am deploying a Rails 4 application using AngularJS as our front-end MVC framework, and I'd like to deploy our assets through a CDN. After running into issues with getting the properly fingerprinted URLs when calling asset_path within my AngularJS routing javascript file, I decided to eliminate the AssetSync gem. To replace AssetSync, I would like to simply use Amazon CloudFront on top of my Rails server serving its own static assets. This works great for my CSS and JS files, but unfortunately I run into CORS issues when trying to serve my HTML templates for Angular as assets:

Chrome Dev Tools console output

Any ideas would be much appreciated!

UPDATE 4/30:

I was finally able to get my Rails server to set the proper 'Access-Control-Allow-Origin' header on assets with the rack-cors gem by following the instructions in this Github issue. Now when I run curl to fetch the files from CloudFront, I see the proper headers. However, when I run curl to send an OPTIONS request, I'm still getting a 403 Forbidden. Check out the two screenshots below:

The GET request for the asset looks good:

Curl GET Request

But the OPTIONS request doesn't....

Curl GET Request

2
ruby-on-railscorsamazon-cloudfront
you need to do this on your S3 bucket CORS policy. - j_mcnally
@j_mcnally I'm not using S3, but instead delivering the assets from my Rails server (hosted at Heroku) - hunteros
Your rails app needs to send what ever headers it wants cached to cloud front if you are using your rails server as your cloudfront origin then... - j_mcnally
@j_mcnally unfortunately getting the proper headers from the Rails app doesn't work. Check out the update I added onto the question from yesterday - the headers are there for my GET from CloudFront, but the OPTIONS request (which Chrome/Firefox perform before the GET) returns a 403 Forbidden. All of the links that I've found so far seem to suggest that CloudFront won't be able to do what I want it to, but holding out hope that someone has solved this issue. - hunteros
Does your rails app respond to an options request? - j_mcnally

2 Answers

2
votes

You will need to enable the use of OPTIONS on your cloudfront cache behavior.

You can do this in the console by selecting your distribution, and going to the behaviors tab.

Edit the default cache behavior and enable extended verb support:

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

I've been asked for this solution a couple times, so I thought I would post what worked for us here.

It seems that Rails will set the CORS headers correctly for CSS and JS files only. However, you can use the rack-cors gem to set custom headers for resources. We added the following configuration to our config/application.rb:

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

We were able to set the CORS headers on only our assets because our asset prefix was set to /assets with the following (default) line in our config/environments/production.rb:

config.assets.prefix = "/assets"

To complete the AWS CloudFront configuration, follow @Cfstat's advice in his answer and make sure that you've edited the default cache behavior on AWS CloudFront to enable extended verb support. Set Allowed HTTP Methods to include GET and OPTIONS.

The last bit of configuration to get all of this working is to set your asset host to point to AWS CloudFront. We wanted to use an environment variable, so we used the following line in config/environments/production.rb:

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

Then we just set the ASSET_HOST env variable to point to our CloudFront URL.