Cors error while downloading image from S3

Question

I am converting a div into an downloadable image.

function generateBanner() {
    domtoimage.toBlob(document.getElementById('wrapper'))
    .then(function(blob) {
      console.log("blob", blob)
      window.saveAs(blob, 'my-node.png');
    });
}

This code works fine. My problem is when this div has an image that is hosted in a S3 Bucket

for example:

<article id="wrapper">
    <p>{{ title }}</p>
    <img class="logo" src="{{ logo }}" alt="">
    <aside class="exclusive" ng-if="exclusive"></aside>
    <aside class="off" ng-if="percentoff">{{ percentoff }}
    </aside>
    <div class="produtos">
        <img src="https://s3-sa-east-1.amazonaws.com/teste-img-roge/Thumbs/0026954_30510_1_415.jpeg" alt="">
    </div>
    <aside class="valid" ng-if="valid"></aside>
    </article>

after that, when I click I got CORS errors, and I have no idea why.

In my s3 Configuration I have this:

<CORSConfiguration>
   <CORSRule>
 <AllowedOrigin>*</AllowedOrigin>
  <AllowedMethod>GET</AllowedMethod>
   <AllowedMethod>POST</AllowedMethod>
   <MaxAgeSeconds>3000</MaxAgeSeconds>
   <AllowedHeader>*</AllowedHeader>
   </CORSRule>
   </CORSConfiguration>

and still the same error. Any idea ? I tried few different configs in s3, and few approachs with javascript, but none of them worked.

Answer 1

This is an old question but still very relevent, I was encountering with the same CORS issue : "Access to fetch at 'https://bucket-chat-name.s3.region-1.amazonaws.com/010110101001-011010110101-contactus%30(2).jpg' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." This error was when i was trying to download the image from S3 the upload worked great. I tried a bunch of solutions and trying Apigateway, user, policy changes but nothing help it to work.

After long search i've found the solution in one old question someone asked about this error. It turned out that the 'access-control-allow-origin' header was nowhere to be found in the response. it happend all because of the browser caching the requests. so the solution is that you need to add the 'mode: cors' and 'cache: no-cache' options to the fetch request.

With that solution the 'origin' header got included in the request, and voilà – the CORS error was gone.

example 1:

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

example 2:

export const downloadMedia = async (e, originalImage) => {
    e.preventDefault();

    try {
        const response = await fetch(originalImage, {
            method: 'GET',
            mode: 'cors',           // Ensures CORS is handled
            cache: 'no-cache',      // Prevents caching issues
            headers: {
                'Content-Type': 'application/octet-stream'
            }
        });

        if (!response.ok) {
            throw new Error('Failed to fetch the file');
        }

        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.style.display = "none";
        a.href = url;

        const nameSplit = originalImage.split("/");
        const duplicateName = decodeURIComponent(nameSplit.pop());

        a.download = duplicateName;
        document.body.appendChild(a);
        a.click();
        window.URL.revokeObjectURL(url);
    } catch (error) {
        console.log('Error while downloading the image', error.message);
    }
};

also this was my cors configuration in s3 bucket:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "http://localhost:5173",
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "Content-Length",
            "Content-Type"
        ],
        "MaxAgeSeconds": 3000
    }
] 

and bucket policy:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::bucket-name/*"
        }
    ]
}

but you can use what you think is better for your usecase(:

Answer 2

You're missing <AllowedMethod>HEAD</AllowedMethod>

Then you should see the following headers:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, HEAD, POST
Access-Control-Max-Age: 3000

Have in mind, that it could take a while before you see the correct headers.