CORS public access (new JSON version)

CORS.json

{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"PublicRead",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject","s3:GetObjectVersion"],
      "Resource":["arn:aws:s3:::YOUR_BUCKET_NAME_GOES_HERE/*"]
    }
  ]
}

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
           "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

Thank you!

It works

Still have the problem:
Access to XMLHttpRequest at '<< myS3Bucket.png' from origin 'http://localhost:3000' (React App running locally) has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

@gmarshall56 same, but I made it work by adding crossorigin="anonymous" to all my <img> tags! Hope that works for you too!!

do not work.

Add this in Bucket > Permissions > Scroll down to bottom to Cross-origin resource sharing (CORS) and add this

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

does this work for fetching jpgs?

Yes

does this configuration change affect old files? or I have to re-upload my old content?

Effective for whole bucket.

Even old existing files? Weird my code works with files added after I changed the configuration but not with the ones that existed previous my change of configuration

it is only working in some browsers, is there a solution for this?

This worked for me. Thanks

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
           "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

[
{
"AllowedHeaders": [
""
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
""
],
"ExposeHeaders": [
"x-amz-server-side-encryption",
"x-amz-request-id",
"x-amz-id-2"
],
"MaxAgeSeconds": 3000
}
]
July 2022 this works!!!