+44 (791) 5698 086

Fix ‘Access-Control-Allow-Origin’ missing

Scenario: 

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):

  1. setting up s3 amazon CORS headers in various ways, but failed
  2. setting up origin headers in cloudfront settings
  3. 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:

  1. Go to amazon s3 (login to aws.amazon.com and then navigate to services > s3)
  2. In the s3 management console, click on your bucket name
  3. Click on Permissions on top and then select CORS configuration
  4. 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>
</CORSRule>
</CORSConfiguration>

Hit save

So this would look like this:

Note:

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Who are we?

Nabtron team includes web, desktop software and mobile apps developers along with SEO professionals.

We are available 24 hours, 7 days a week. Contact us now for anything you need!

Join our mailing list

Lets become friend :) What's your name & email?