S3 Access-Control-Allow-Origin

Question

. 。 Answers to this question are eligible for a +50 reputation bounty. Will wants to to this question: 这个问题：

I'm looking for an answer that debugs my app and explains why the fix works so I understand it.

I'm getting an error embedding an image on a 3rd party site from my rails app. The image is managed via activeStorage and served from an s3 bucket.

The image does not display in chrome/edge/safari. works in firefox.

I get an error in the console

Access to image at [s3 url] (redirected from [app url]) has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The image is included in the app like this:

<img alt="pose for outfit" class="pose-image" crossorigin="anonymous" src="https://app.puctto.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBc2tFIiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--af1951d452ca9460b7e007f20d5157b34690d653/model-pose.jpg">

I have added a cors policy to my bucket

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

I have added a bucket policy as that was suggested elsewhere as a fix.

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

Which has not fixed the issue. How can I get the CORS headers to be sent correctly? How can I get the image to display correctly?

To see the error, go to: https://www.puctto.me/collections/all Click the P in the bottom right. There should be a model image, but in chrome, edge and safari no image displays and the console gives the error.

Answer 1

Try this approach if you're programaticaly fetching the image:

Cross-origin requests AJAX requests to AWS S3 sometimes result in CORS error

    const response = await fetch(url, {
      cache: 'no-cache',
    });