"Access to Font..has been blocked by CORS policy" on only one file

Question

Note: I am using Wordpress and serving the media files, css, js, etc. through Amazon CloudFront/S3.

Hello,
I know there are a lot of posts like this but I am still struggling. I was able to fix this issue for a majority of the font files that I am loading, however, this one continues to be an issue.

Access to Font at 'http://mycloudfrontID.cloudfront.net/wp-content/themes/bridge/css/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3' from origin 'http://mydomainname' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://maxmajor.net' is therefore not allowed access.

The other font files are fine after I added this to my CORS policy on AWS S3:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

and this is in my .htaccess:

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Any ideas why this error is still firing?

Thanks, Brian

Solution 1

Try to change:

Header set Access-Control-Allow-Origin "*" 

with this:

Header add Access-Control-Allow-Origin "*"

Also I read How does Access-Control-Allow-Origin header work?

Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy

that for security reasons you have to include your URL.

So, your .htaccess should have this:

<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
<IfModule mod_headers.c>
    Header add Access-Control-Allow-Origin "http://mysitename.com"
</IfModule>
</FilesMatch>

Works for me!

Solution 2

Have you considered referring the following thread?
CORS Issue with woff2 fonts behind CDN in Chrome

It says

Turns out that the problem was actually with the Content-Type. As soon as I changed the content type to application/font-woff2 and invalidated the cache of these woff2 files, everything went through smoothly.

Solution 3

Are you sure that you are sending Authorization headers with your GET 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.