How to resolve AWS S3 CORS error

Play this article

The error message you're seeing is due to the Cross-Origin Resource Sharing (CORS) policy on your AWS S3 bucket. This policy determines who can access your bucket's contents from a different domain. In my case, it seems the policy is not allowing the local server (http://localhost:3001) to access the resources.

To resolve this issue, you need to update the CORS policy for your S3 bucket. Here's a step-by-step guide:

  1. Sign in to the AWS Management Console and open the Amazon S3 console at https://console.aws.amazon.com/s3/.

  2. In the bucket list, choose the name of the bucket that you want to add a CORS policy to.

  3. Choose the 'Permissions' tab.

  4. Scroll down to the 'Cross-origin resource sharing (CORS)' section and choose 'Edit'.

  5. In the CORS configuration editor, add a new CORS rule. For example:

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
        "AllowedOrigins": ["http://localhost:3001"],
        "ExposeHeaders": []
    }
]
  1. Choose 'Save'.

This policy allows your local server (http://localhost:3001) to perform GET, PUT, POST, and DELETE operations on your S3 bucket. Please adjust the policy according to your needs.

Remember, CORS policies can pose a security risk if not configured properly. Only allow access to trusted domains and use the strictest settings that your application allows.