In the notes app we’ll be building, users will be uploading files to the bucket we just created. And since our app will be served through our custom domain, it’ll be communicating across domains while it does the uploads. By default, S3 does not allow its resources to be accessed from a different domain. However, cross-origin resource sharing (CORS) defines a way for client web applications that are loaded in one domain to interact with resources in a different domain. Let’s enable CORS for our S3 bucket.

Go back to the AWS Console and head over to the S3 section. Then, select the bucket we had previously created.

Select Created S3 Bucket screenshot

Select the Permissions tab

Select S3 Bucket Permissions tab

Then scroll down to the Cross-origin resource sharing (CORS) section and hit Edit.

Scroll to S3 Bucket CORS Configuration screenshot

Paste the following CORS configuration into the editor, then hit Save changes.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "HEAD",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

Save S3 Bucket CORS Configuration screenshot

Note that, you can customize this configuration to use your own domain or a list of domains when you use this in production.

Now we are ready to use our Serverless backend to create our frontend React app!