Handle CORS in S3 for File Uploads

In the notes app we are 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.

Replace the following line in stacks/StorageStack.ts.

const bucket = new Bucket(stack, "Uploads");

With this.

const bucket = new Bucket(stack, "Uploads", {
  cors: [
    {
      maxAge: "1 day",
      allowedOrigins: ["*"],
      allowedHeaders: ["*"],
      allowedMethods: ["GET", "PUT", "POST", "DELETE", "HEAD"],
    },
  ],
});

Note that, you can customize this configuration to use your own domain or a list of domains. We’ll use these default settings for now.

Commit the Changes

Let’s commit our changes and push it to GitHub.

$ git add .
$ git commit -m "Enabling CORS"
$ git push

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