3

I have been successful using fontawesome within a Rails app for sometime.

I recently tried to move my asset distribution to a CDN, but ran into a CORS issue when using Chrome and Firefox.

I have now added the following to production.rb, which appears to have fixed the problem in Chrome. 

config.action_dispatch.default_headers.merge!({
  'Access-Control-Allow-Origin' => 'path.to.my.app',
  'Access-Control-Request-Method' => '*'
})

I have two questions:

  1. How can I ensure this header is only applied to font files (e.g., if I were using a .htaccess file I would do something like <FilesMatch "\.(ttf|otf|eot|woff|svg)$">, how to achieve this in Rails, and is this advisable?)

  2. The above appears not have resolved the CORS issue in Firefox (at least I am still seeing 'font missing' blank squares in place of fontawesome icons). Does Firefox have special requirements, and if so, what are they?

I've come across many pages about CORS, CDN, Rails and fonts online, but none appear to be relevant to my case (though this may be because I'm not fully understanding the issue). Grateful for any ideas or references.

Andy Harvey
  • 12,333
  • 17
  • 93
  • 185

1 Answers1

1

I think this is a good explanation of the CORS issue to fully understand the concept - How does Access-Control-Allow-Origin header work?

Access-Control-Allow-Origin is a CORS (Cross-Origin Resource Sharing) header.

When Site A tries to fetch content from Site B, Site B can send an Access-Control-Allow-Origin response header to tell the browser that the content of this page is accessible to certain origins. (An origin is a domain, plus a scheme and port number.) By default, Site B's pages are not accessible to any other origin; using the Access-Control-Allow-Origin header opens a door for cross-origin access by specific requesting origins.

When it comes to solving this specifically with rails - I read this library does a good job -

https://github.com/cyu/rack-cors

You may already have seen this, but I thought the last answer here might help - font-awesome and images is not loaded in ruby-on-rails-4 production firefox

This post explains couple of ways to trackle this for rails - How to display Font Awesome icons in Firefox?

Community
  • 1
  • 1
Paul John
  • 1,626
  • 1
  • 13
  • 15
  • thanks @paul, I did try rack-cors, but swapped it out as did not appear to fix the issue. Adding the config code in my question has fixed the problem in Chrome and Safari — fonts now appears as expected. But Firefox is still not displaying fontawesome fonts. I'm unsure why Firefox should behave differently to the other browsers...? – Andy Harvey Mar 14 '15 at 02:47
  • hi @AndyHarvey do do u have nginx conf file? – Paul John Mar 14 '15 at 09:00
  • is there a way you can try this... http://stackoverflow.com/questions/15080434/how-to-display-font-awesome-icons-in-firefox – Paul John Mar 14 '15 at 09:08