Ruby on Rails CORS setup for Heroku with Passenger 5.0.28

If you are using cloudfront with Heroku, chances are you will encounter some problems if you are using something like font-awesome. I won’t go into the details of how to setup cloudfont, but your heroku passenger should have the following. First, read the Passenger Documentation for Nginx configuration template.

These are the correct steps:

1. Copy the default ngnix config

Do this in the root directory of your Rails application.

cp $(passenger-config about resourcesdir)/templates/standalone/config.erb config/passenger_config.erb

2. Remove passenger’s default asset setup

Find the line:

<%= include_passenger_internal_template('rails_asset_pipeline.erb', 8, false) %>

And change it to:

  <%# include_passenger_internal_template('rails_asset_pipeline.erb', 8, false) %>

This step is important, if you apply the below without doing this, it won’t work. Trust me, I have spent a few hours on keyboard to find this out.

3. Add your custom CORS config

Find the text “BEGIN your own configuration options” in the same config/passenger_config.erb file. It should be right below the link you changes in step 2. Add the below settings. I’ll leave in their comments about “BEGIN your own configuration options” so you can see where to put it.

but if you have several family members vying for bandwidth for things like streaming video and playing Overwatch online best wireless routers under 50 a new router can make a world of difference and help keep the peace.

### BEGIN your own configuration options ###
# This is a good place to put your own config
# options. Note that your options must not
# conflict with the ones Passenger already sets.
# Learn more at:
# https://www.phusionpassenger.com/library/config/standalone/intro.html#nginx-configuration-template

location ~ "^/assets/.+\.(woff|eot|svg|ttf|otf).*" {
    error_page 490 = @static_asset_fonts;
    error_page 491 = @dynamic_request;
    recursive_error_pages on;

    if (-f $request_filename) {
        return 490;
    }
    if (!-f $request_filename) {
        return 491;
    }
}

# Rails asset pipeline support.
location ~ "^/assets/.+-([0-9a-f]{32}|[0-9a-f]{64})\..+" {
    error_page 490 = @static_asset;
    error_page 491 = @dynamic_request;
    recursive_error_pages on;

    if (-f $request_filename) {
        return 490;
    }
    if (!-f $request_filename) {
        return 491;
    }
}

location @static_asset {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
    add_header ETag "";
}

location @static_asset_fonts {
    gzip_static on;
    expires max;
    add_header Cache-Control public;
    add_header ETag "";
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, HEAD, OPTIONS';
    add_header 'Access-Control-Allow-Headers' '*';
    add_header 'Access-Control-Max-Age' 3628800;
}

location @dynamic_request {
    passenger_enabled on;
}

### END your own configuration options ###

4. Update your Procfile

Your Procfile should be changed to look something like this:

web: bundle exec passenger start -p $PORT --max-pool-size $WEB_CONCURRENCY --nginx-config-template ./config/passenger_config.erb

5. Deploy

Next you will need to deploy this new setting to Heroku.

6. Check out the header with curl

Open your site in Chrome and go to the network panel. You can filter the assets by ‘Font’. Select one of the URLS for one of your font file. If you have Cloudfront configured properly, it will look something like https://afec098982.cloudfront.net/assets/fontawesome-webfont-82e18d70ffda5f198cc31bfb026dfa78.woff2?v=4.5.0. Replace the cloudfont domain with your heroku app domain and do a curl command that looks something like this:

curl -s -D - https://my-cray-cray-app.herokuapp.com/assets/fontawesome-webfont-82e18d70ffda5f198cc31bfb026dfa78.woff2?v=4.5.0 -o /dev/null

If everything is setup right, you should see a response that includes Access-Control-Allow- headers:

  HTTP/1.1 200 OK
  Connection: keep-alive
  Server: nginx/1.10.0
  Date: Fri, 13 May 2016 01:54:05 GMT
  Content-Type: application/octet-stream
  Content-Length: 66624
  Last-Modified: Mon, 29 Feb 2016 21:58:39 GMT
  Expires: Thu, 31 Dec 2037 23:55:55 GMT
  Cache-Control: max-age=315360000
  Cache-Control: public
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: GET, HEAD, OPTIONS
  Access-Control-Allow-Headers: *
  Access-Control-Max-Age: 3628800
  Accept-Ranges: bytes
  Via: 1.1 vegur