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).ruby-on-railscorsamazon-cloudfrontcdn
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'...