CORS issue from CloudFront to server for font

Question

We are getting CORS issue for cloudfront to my site for FONT only.

Access to Font at 'http://d2v777xrj.cloudfront.net/assets/simple-line-icons/fonts/Simple-Line-Icons-ff94ad94c3a9d04bd2f80cb3c87dcccb.woff' from origin 'http://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not allowed access.

Answer 1

References (After looking into references, found these reference that worked for me. I didnt add any CORS on S3 bucket. Only Cloudfront accessing S3) [for your case change themes to assets]

https://deliciousbrains.com/wp-offload-media/doc/font-cors/

http://thelazylog.com/correct-configuration-to-fix-cors-issue-with-cloudfront/

Answer 2

Tried everything but nothing worked! But the solution was very easy just two-step solution and nothing else.

1. Goto S3 Bucket->Permissions->Edit : Cross-origin resource sharing (CORS)->paste below configuration. In most of the other articles they are doing mistake of wrong header. you have to put "Origin" in AllowedHeaders.

   [ { "AllowedHeaders": [ "Origin" ], "AllowedMethods": [ "HEAD", "GET" ], "AllowedOrigins": [ "http://www.yourdomain.com", "https://www.yourdomain.com", "https://yourdomain.com", "http://yourdomain.com" ], "ExposeHeaders": [], "MaxAgeSeconds": 3000 } ]

2. Goto Cloudfront->Behaviours->Default(*)->Edit Change, Cache and origin request settings to : Use legacy cache settings Change, Cache Based on Selected Request Headers to : Whitelist Then, Add Whitelist Headers to : Origin [Only]

It will work.. you can check a working example of Lonavala Property

Answer 3

Cloud Front Added Origin Policy Recently. Updating the origin policy to s3origin worked for me as below once S3 was configured correctly.