react - No 'Access-Control-Allow-Origin' header is present on the requested resource when fetching the images from s3

Question

import imageToBase64 from 'image-to-base64';
...

formatImageToBase64 = () => {
   imageToBase64("https://example.s3.ap-southeast-1.amazonaws.com/images/image1") // Path to the image
       .then(
           (response) => {
               console.log(response);
           }
       )
       .catch(
           (error) => {
               console.log(error); 
           }
       )
}

When I run this function, error occurs as below.

Access to fetch at 'example.s3.ap-southeast-1.amazonaws.com/images/image1?AWSAccessKeyId=qwertyuip12344&Expires=1664366635&Signature=aoqogfjfj3%2Foofofol%3D' 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 checked my S3 setting but it seems no problem.

I also tried to change the AllowedOrigin to '*', but still not working.

Answer 1

Try <AllowedOrigin>*</AllowedOrigin> instead of your localhost and check if it works - if it does then you know the problem is within AllowedOrigin rule.

For more detailed description how to define your CORS just take a look at: S3 - Access-Control-Allow-Origin Header

UPDATE: I've tried to access the link you've provided and what I've got in return is a following message "The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint". You can follow it up at: AWS S3: The bucket you are attempting to access must be addressed using the specified endpoint