CORS

Browsers block a web page from calling another domain unless that domain allows it. To let your site upload to or read from a bucket with JavaScript (for example with a presigned PUT URL), add a CORS rule to the bucket.

You don’t need CORS for plain links, <img> tags or downloads, or for requests made from your server.

In the console

Open the bucket’s settings, find CORS, and enter your site’s addresses under Allowed origins (one per line), for example:

https://app.example.com
http://localhost:5173

Choose the methods to allow and save.

With S3 tools

Setting CORS needs an Admin key.

cors.json

{
  "CORSRules": [
    {
      "AllowedOrigins": ["https://app.example.com", "http://localhost:5173"],
      "AllowedMethods": ["GET", "PUT", "POST", "HEAD"],
      "AllowedHeaders": ["*"],
      "ExposeHeaders": ["ETag", "x-amz-version-id"],
      "MaxAgeSeconds": 3600
    }
  ]
}

EP=https://s3.dockhive.io
aws s3api put-bucket-cors --bucket my-app-uploads --cors-configuration file://cors.json --endpoint-url $EP
aws s3api get-bucket-cors --bucket my-app-uploads --endpoint-url $EP
aws s3api delete-bucket-cors --bucket my-app-uploads --endpoint-url $EP

Or from code:

s3.put_bucket_cors(
    Bucket="my-app-uploads",
    CORSConfiguration={
        "CORSRules": [{
            "AllowedOrigins": ["https://app.example.com"],
            "AllowedMethods": ["GET", "PUT", "POST", "HEAD"],
            "AllowedHeaders": ["*"],
            "ExposeHeaders": ["ETag"],
            "MaxAgeSeconds": 3600,
        }]
    },
)

Tips

• List exact origins (scheme, host and port). Use "*" only for public, read-only buckets.
• Expose ETag if your page does multipart uploads from the browser; it needs each part’s ETag to finish the upload.
• Changes apply to new requests straight away, but browsers cache preflight answers for MaxAgeSeconds.