Phusion Passenger + Heroku + Cloudfront: CORS Configuration

Question

I have fonts served from cdn.myapp.com using Cloudfront.

I was using the font_assets gem which helped me sending CORS headers to have my fonts accepted in Firefox (among others).

I recently moved my webserver to Phusion Passenger, I'm very happy with this (speed!).

But since my migration, I can't send these headers and I suspect nginx to be responsible for it.

How can I send custom headers with Phusion on Heroku? Can I access nginx config from heroku, or is there another config to set?

Thanks for support!

Oecd

Answer 1

I tried using the rack-cors gem but it took me a while to notice that although using Heroku's Rails 12 Factor Gem Phusion Passenger 5.0.10 (Nginx) was serving the assets.

Just for future reference, based on @user664833's solution, here's my setup for running a Rails 4.2 application hosted on Heroku with Phusion Passenger as server and Amazon Cloudfront as CDN, using cdn.my-domain.com as a CNAME for the distribution and restricting only to GET and HEAD requests for subdomains of my-domain.com:

# config/nginx.conf.erb
location @static_asset {
  gzip_static on;
  expires max;
  add_header Cache-Control public;
  add_header ETag "";
  # added configuration for CORS for font assets
  if ($http_origin ~* ((https?:\/\/[^\/]*\.my-domain\.com(:[0-9]+)?)) {
    add_header 'Access-Control-Allow-Origin' "$http_origin";
    add_header 'Access-Control-Allow-Credentials' 'true'; # only needed for SSL
    add_header 'Access-Control-Allow-Methods' 'GET, HEAD';
    add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';
  }
  # end of added configuration
}

I edited the cache behavior to whitelist the Origin header.

And changed the Origin Settings (Origin tab) to Match viewer (in case you want to use SSL).

Finally, create an invalidation (no need to do this if it is a new configuration) in the Invalidations tab, using /* to clear everything.

Hopefully, this will save time to someone.

Haymow

Hello, I have configured everyting you suggested but I am still getting 'Access-Control-Allow-Origin' error. Nginx&Passenger works as expected. I configured cloudfront as well but no luck – Reede

Answer 2

As from now, there is no option for this in the app config.

This discussion : https://groups.google.com/forum/#!topic/phusion-passenger/nskVxnxFssA explains that this will be possible in a near future.

Oecd

Have you solved this? Here is my solution. Please let me know if you have a better nginx configuration in this regard. – Nammu

I found a way around since. Apparently they made a change on Phusion to make it work: groups.google.com/d/msg/phusion-passenger/nskVxnxFssA/… Thanks for yours! – Oecd

Yes, this is exactly what I did. What does your nginx.conf.erb look like with respect to the Access-Control lines? Is it exactly like mine or how is it different? – Nammu

I haven't been using this solution yet. Cool that you reported! – Oecd