Site icon Nabtron

Fix ‘Access-Control-Allow-Origin’ missing

Nabtron

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)

update: instead of using the xml, now you should use the json format (below).

<?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>

Hit save

So this would look like this:

Json code for amazon s3 cors issue:

[
 {
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "GET",
        "HEAD"
    ],
    "AllowedOrigins": [
        "*"
    ],
    "ExposeHeaders": []
 }
]

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.

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

Exit mobile version