S3 : How To Allow CORS & Other Settings For Static Asset Hosting

In this guide, we are going to look at how to put static assets into an AWS S3 Bucket. The goal being that we can use those assets in the front end of a website. Maybe as images or via CSS & JS. In order to be able to do this, we need two things:

  1. The objects in the bucket need to be publicly accessible.
  2.  We need to allow CORS. (So that we don’t get the No Access-Control-Allow-Origin header is present)

Step 1: Remove “Block public access” : If you have an existing Bucket

If you have an existing S3 bucket, you will have to open up the bucket page on AWS and then go to the permissions tab as shown in the image below.

Existing S3 bucket, Go to the permissions tab

When you scroll down, you will see a section where you can edit the “block public access” settings. It should look something like this…

Chnage "block public access" settings for eisting bucket

On clicking “edit”, you should reach a screen where you just need to “uncheck” the checkbox that says that all public access it blocked.

uncheck the checkbox to block all public access

Step 1: “Block public access” Settings : If you are making a new bucket

When creating a new bucket, you will see the same settings to “block public access” which you need to UNCHECK.

un check the box of blocking public access when creating a new bucket

When you uncheck this, a new section will pop up under it. You need to also need to CHECK the checkbox there to allow it…

new section shows when you allow public access need to check it also

Step 2: Set Bucket Policy To Allow Files To Be Read

For your bucket, go to the permissions tab…

Existing S3 bucket, Go to the permissions tab

Scroll down and find the Bucket policy section…

bucket policy section under permissions settings

In the bucket policy section, edit it to enter the below JSON.

    "Version": "2012-10-17",
    "Statement": [
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<YOUR BUCKET NAME HERE>/*"

Remember to replace the <YOUR BUCKET NAME HERE> with your bucket name.

The bucket policy is taken from here.

You can learn more about bucket policies by going here.

Step 2: Set CORS Settings To Prevent CORS errors

For your bucket, go to the permissions tab…

Existing S3 bucket, Go to the permissions tab

Scroll all the way to the bottom and then go to the Cross-origin resource sharing (CORS) section.

There, you need to hit “Edit” and enter the following JSON.

allow cors settings for s3 bcuket

Here is the JSON for copy and paste…

        "AllowedHeaders": [
        "AllowedMethods": [
        "AllowedOrigins": [
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000

Finally: How To Check If Things Are Working Right

This is simple. You can open up the console on Google Crome / Firefox & then run…


You should get the following kind of responses…

check to see if the allow cors is working propery using the console in developer tools

And that’s it!