I've just moved from my previous CDN to CloudFront for two of my websites. First one is working fine but I used the same snapshot in DigitalOcean to create the 2nd site and here I am getting
Access to Font at 'http://CLOUDFRONT_HOSTNAME.cloudfront.net/wp-content/themes/Newspaper/images/icons/newspaper.woff?14' from origin 'http://www.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.example.com' is therefore not allowed access.
I've tried all possible solutions available in online like adding a header in nginx.
location ~* \.(ttf|ttc|otf|eot|woff|svg|font.css)$ {
add_header Access-Control-Allow-Origin *;
}
Then updating privacy in S3
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
Most of the solutions are this in various sites including other serverfault and stackoverflow solutions. I've also invalidated the font file in CloudFront, but no luck :(
Can someone please guide me what might be the issue? I've connected CloudFront via W3 Total Cache plugin in WP.
UPDATE
1. Whitelist Headers
2. Invalidated the files
- Request and Response
Thanks in Advance
Arif