5

Recently we moved our assets on a CDN Cloudfront. We have noticed that the surfaces were broken on Firefox. After a few minutes of searching, it was a story of CORS. We allowed the field Cloudfront.

application_controller:

after_filter :set_access_control_headers

def set_access_control_headers
  headers['Access-Control-Allow-Origin'] = CDN_CLOUDFRONT
end

production.rb:

CDN_CLOUDFRONT = "http://xxx.cloudfront.net"

This worked very well until yesterday. After several searches and reflections, I have not found a solution.

Any idea?

Dan D.
  • 73,243
  • 15
  • 104
  • 123
hypee
  • 718
  • 5
  • 20
  • Have you checked the answer to this similar-sounding question? http://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa – friism Mar 14 '13 at 21:34
  • The question sounds the same but the CDN provider is different -> different answer. – ferrix Mar 15 '13 at 09:39

3 Answers3

7

I haven't worked with a Heroku setup, but AFAIK (and as illustrated at developer.mozilla.org), the header Access-Control-Allow-Origin should reflect a value of the domain which consumes static assets from the CDN.

E.g.: For a website hosted at http://mydomain.net and consuming assets from http://wefe342r34r23.cloudfront.net

headers['Access-Control-Allow-Origin'] = 'http://mydomain.net'

Will allow mydomain.net to access assets via http://wefe342r34r23.cloudfront.net. In other words, replacing CDN_CLOUDFRONT with your website's domain name should solve the problem.

Hope this helps.

P.S.: I'm not sure how your setup worked until yesterday. :)

P.P.S: Adding Alternate Domain Names (CNAMEs) to your CDN will help you in a scenario wherein you want to quickly discard an existing distribution exposed over http://xxx.cloudfront.net and start using a fresh distribution http://yyy.cloudfront.net. You won't need to change anything in your application codebase if you are using an Alternate Domain Name such as http://cdn.mydomain.net in that case.

rhetonik
  • 1,818
  • 1
  • 15
  • 21
  • This header should be set on assets queries right? Or on html queries? I'm struggling with this ([and I'm not the only one](http://stackoverflow.com/questions/20585703/cloudfront-firefox-cors-issues)) so if you detail a little more, it would be greatly appreciated! – Augustin Riedinger Jan 21 '14 at 10:15
0

This is copy of what I posted in another Stack Exchange page related to the same topic, and I am leaving this in case someone else has the same issues but didn't find the right answer.

I had the same issue with a Rails 3 app on Heroku; Font-Awesome icons were not showing because I was running my assets through Sumo CDN.

There are several replies related to this, one of which is to put an after_filter in your application_controller to set the header value (by freemanoid), but that didn't work for me, and I had to use the custom middleware suggested by Peter Marklund.

Both solutions are posted here under the Rails 3.1 versions: How to set access-control-allow-origin in webrick under rails?

Community
  • 1
  • 1
btsai
  • 89
  • 1
  • 3
0

workaround I have used - upload the fonts separately to S3 and set the cors configuration on the bucket. Hardcode the font links to the S3 fonts. All assets (other than fonts) will come from cloudfront - your fonts will come from S3. Its ugly - but it works....

user2515011
  • 127
  • 1
  • 12