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.

Similar to the previous chapter, the Bucket component enables CORS by default.

new sst.aws.Bucket("Uploads", {
  // Enabled by default
  cors: true,
});

You can configure this further. Read more about this here.

new sst.aws.Bucket("Uploads", {
  cors: {
    allowMethods: ["GET"]
  }
});

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!