I was trying to setup amazon origin push cdn cache using s3 and cloudfront via w3 total cache plugin. Things went well except for a font file not being properly delivered by the cdn, instead giving the error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://–domain–.cloudfront.net/wp-content/themes/Extra/fonts/ET-Extra.ttf. (Reason: CORS header ‘Access-Control_Allow-Origin’ missing).
The issue was checked and found in all major browsers on macbook pro: safari, chrome, firefox.
So here I’m going to explain what I did that didn’t work, and what I did which worked.
I tried (didn’t work):
- setting up s3 amazon CORS headers in various ways, but failed
- setting up origin headers in cloudfront settings
- various settings in w3 total cache cdn page
What worked, was actually the step 1, but with different settings.
How to fix CORS error: Access-Control-Allow-Origin Missing for amazon
The way I fixed it was:
- Go to amazon s3 (login to aws.amazon.com and then navigate to services > s3)
- In the s3 management console, click on your bucket name
- Click on Permissions on top and then select CORS configuration
- On that page, amazon will show some default settings for you, don’t use them, they did NOT work for me, instead use the following settings and then save them (don’t forget to change domain-name to your own domain name)
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://www.domain-here.com</AllowedOrigin> <AllowedOrigin>https://www.domain-here.com</AllowedOrigin> <AllowedOrigin>http://domain-here.com</AllowedOrigin> <AllowedOrigin>https://domain-here.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <AllowedMethod>HEAD</AllowedMethod> <AllowedMethod>DELETE</AllowedMethod> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>
So this would look like this:
You might need to purge the file from cloudfront cache (only invalidating the file which you’re trying to set CORS for will be enough). Do this step only if you’re seeing the error after completion of the above steps and clearing the cache.
Let me know if you’re unable to fix the issue and want me to help you with it.
Also note: you might need to add behavior in cloudfront using answer on this page: https://stackoverflow.com/questions/51932528/cors-issue-from-cloudfront-to-server-for-font/53119758#53119758