Getting cors error while downloading the image from presigned URL in react js

Question

I get this error when trying to download the image from presigned URL

Access to fetch at 'https://unikphotography-bucket.s3.ap-south-1.amazonaws.com/48494c71-2417-4a63-99c2-d3279f8becce_.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAXRK6DUIY6DI4FSOM%2F20231229%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20231229T203002Z&X-Amz-Expires=18000&X-Amz-Signature=b98f4ca4485f73061cc28643fdee99d77dd37a729bfcfd1b3e1c714f1fcd6f88&X-Amz-SignedHeaders=host' from origin 'http://localhost:3000' 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.

I have updated cors policies in s3 as per following

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://localhost:3000",
>!             "other domains"
        ],
        "ExposeHeaders": []
    }
]

The Video file is getting downloaded, the problem is with image file.

below is the react code

const handleDownload = async (imageURL) => {
    setisLoading(true)
    console.log(imageURL,'+',auth.token)
    try {

      const response = await fetch(imageURL,{
        header:{
          'Content-Type': 'image/jpeg',
        }
      });
      
        if(response.ok){
         console.log('ok')
          const blob = await response.blob();
          console.log(blob)
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = 'unik-photograhy-image';
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
          window.URL.revokeObjectURL(url);
        }
     
    } catch (error) {
      console.error('Error downloading image:', error);
    }finally{
      setisLoading(false)
    }
  };

I tried updating the cors policy to allow all the origins, making the s3 bucket access to public.

Can you remove the >! "other domains" part from your policy and try again — Anuj Panchal
– Anuj Panchal, Commented Dec 30, 2023 at 4:59
How are you authenticating that the incoming request is a legit one or not? Any sort of authentication and authorization using the IAM user's access and secret keys? I am asking this because I do not see it in your code. Also, ensure that your S3 bucket's policy is allowing the specified origin to fetch resources from the bucket. — Anuj Panchal
– Anuj Panchal, Commented Dec 30, 2023 at 5:14
Change the header to headers in the fetch section. I think that should solve your problem — Anuj Panchal
– Anuj Panchal, Commented Jan 1, 2024 at 3:50

Anuj Panchal · Accepted Answer · 2024-01-01 05:32:20Z

0

You can try the following piece of code, you should try changing header to headers

Also, check whether the image that you are trying to download is in JPEG or any other format because in the headers we are specifying the Content-Type as image/jpeg but if the requested image format is different then also the code may throw an error

const handleDownload = async (imageURL) => {
  setisLoading(true);
  console.log(imageURL, "+", auth.token);

  try {
    const response = await fetch(imageURL, {
      // Change header to headers here
      headers: {
        "Content-Type": "image/jpeg",
      },
    });

    if (response.ok) {
      console.log("ok");
      const blob = await response.blob();
      console.log(blob);

      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
      a.download = "unik-photography-image";
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }
  } catch (error) {
    console.error("Error downloading image:", error);
  } finally {
    setisLoading(false);
  }
};

edited Jan 1, 2024 at 5:32

answered Jan 1, 2024 at 4:58

Anuj Panchal

4156 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shubham Awantkar Over a year ago

this piece of code is working fine for downloading video, the only problem is with the images

Shubham Awantkar Over a year ago

okay, so the problem is when I disabled the cache in devtools, the images are getting downloaded.

Anuj Panchal Over a year ago

Okay, seems you got the problem :)

Collectives™ on Stack Overflow

Getting cors error while downloading the image from presigned URL in react js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related