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
Best Answer
Are you sure that you are sending
Authorization
header with yourGET
requests for the fonts?If not, in your S3 CORS policy change
<AllowedHeader>Authorization</AllowedHeader>
to
<AllowedHeader>*</AllowedHeader>
.This tiny miss had bugged me for a month.