Rails + Cloudfront - No Access-Control-Allow-Origin header is present

So I've configured my Ruby on Rails app to use CloudFront as a CDN. JavaScript, CSS & image assets seem to be serving correctly via CloudFront but fonts are failing with a CORS issue -

Access to Font at 'https://abcdefghikl.cloudfront.net/assets/fonts/din-regularalternate-webfont-79090091223f0c54d7042ef125ad4f26.ttf' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://myapp.com' is therefore not allowed access.

Any idea how I can fix this?

I have whitelisted the following headers on AWS CloudFront as well. Btw, the fonts are being served from my Rails server (not from S3).

enter image description here

1 answer

  • answered 2018-03-13 20:50 roryhewitt

    Quick answer - you can't. This requires a change at the server-side - nothing you can do in your client (browser) code. CORS only applies to AJAX requests (using fetch under the covers) and fonts.

    You could of course, simply download the font and then host it yourself rather than try to download it in realtime from Cloudfront, but that would be stealing...

    Fun fact: CORS was developed SPECIFICALLY to stop people from accessing/downloading fonts from 'font factories'...