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

Steve Robinson Source

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



answered 6 months ago roryhewitt #1

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.

But if the server side is under your control, check whether you are explicitly adding the CORS response headers (Access-Control-Allow-Origin etc.) in your response from your Rails server.

If not, you'll need to actually ADD them to the response (either at the Rails server or in the CDN itself). Whitelisting them simply allows them through (and may affect caching), but they need to be explicitly added to the response

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

comments powered by Disqus