Cloudfront CORS issue serving fonts on Rails application

Question

I keep receiving this error message from the console when visiting my website:

font from origin \'https://xxx.cloudfront.net\' has been blocked from loading by C         


        

Answer 1

As of version 5.0, Rails allows for setting custom HTTP Headers for assets and you don't have to use the rack-cors or font-assets gems. In order to set Access-Control-Allow-Origin for assets (including fonts), just add the following code to config/environments/production.rb:

config.public_file_server.headers = {
  'Access-Control-Allow-Origin' => '*'
}

The header value could also be a specific domain, like the following:

config.public_file_server.headers = {
  'Access-Control-Allow-Origin' => 'https://www.example.org'
}

This worked for my app and I didn't need to change any settings on Cloudfront.