Rails assets Cloudfront fontawesome CORS

Question

I tried a lot of solutions found on stackoverflow/github for this issue but I can't get it to work.

I'm using font-awesome-rails and I precompile my assets for production. I've set CloudFront for my assets in my production config:

config.action_controller.asset_host = "https://XXXX.cloudfront.net"

When I load a page (from Chrome/Firefox because Safari is OK with CORS) I get this common error message :

Font from origin 'https://XXXX.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://example.com' is therefore not allowed access.

I already tried to :

Add the gem rack-cors and change my config.ru without success
Set an after_filter to set the server headers without success
Create an invalidation on CloudFront for the three fontawesome files without success

A workaround would be to remove the fontawesome gem and use instead:

<%= stylesheet_link_tag "//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css", :media => "all" %>

But I'd rather find the issue.

Thanks

Might need to add a CORS configuration on the AWS S3 bucket. — typeoneerror, Nov 26 '15 at 16:38

score 5 · Answer 1 · edited Nov 29 '16 at 15:12

5

I have had this issue and it was solved by doing the following changes. First of all, set a header on your http server add_header Access-Control-Allow-Origin *;

the complete configuration used:

location ~* \.(ttf|ttc|otf|eot|woff|woff2|svg|font.css)$ {
  add_header Access-Control-Allow-Origin *;
  expires max;
  allow all;
  access_log off;
  add_header Cache-Control "public";
}

and then create the invalidation on Cloudfront.

ps: I did not use rack-cors or any other gem

edited Nov 29 '16 at 15:12

Justin

4,922
2
27
69

answered Oct 15 '15 at 02:08

Thales Ribeiro

53
4

Where we should put this code into? To production.rb? or initializer? – Shalafister's Dec 19 '16 at 11:42
@Shalafister's these are nginx web server configurations. – Cyzanfar Jan 04 '18 at 22:03
Thanks for this. What would really put this answer over the top is an explanation of each line. I'm not sure if all of those (other than `add_header Access-Control-Allow-Origin *`) are required to achieve the goal. – Peter P. Jun 30 '21 at 02:19

score 0 · Answer 2 · answered Jun 21 '19 at 06:27

This solution worked for me:

Your Bucket > Permissions > CORS Configuration and paste the following configuration:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

On your Rails project:

> vim environments/production.rb

add:

if ENV['CLOUDFRONT_ENDPOINT']
    config.action_controller.asset_host = proc { |source|
      if source =~ /^.*?\.(eot|ttf|woff|svg|otf)$/
        '//mydomain.com'
      else
        ENV.fetch('CLOUDFRONT_ENDPOINT') { 'https://cloudfrontname3244d4.cloudfront.net' }
      end
    }
end

Rails assets Cloudfront fontawesome CORS

2 Answers2