david001's avatar

CORS problem

Hi, my images are uploaded to s3, once it uploaded it get the image url. If I copy that url and paste in web browser I can see the image but on js I get error message


Access to image at 'https://snapsstaging.s3.ap-southeast-2.amazonaws.com/004d982a6f6b7028df4fbf2036c70e76badc8789.png' from origin 'https://org.snap.test' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

. I am accessing file from localhost. I am loading an image in canvas


 
        let imageURL = "https://snapstaging.s3.ap-southeast-2.amazonaws.com/004d982a6f6b7028df4fbf2036c70e76badc8789.png";
        alert(imageURL)
        base_image = new Image();
        base_image.crossOrigin = "Anonymous"
 
        base_image.src = imageURL
     
        base_image.onload = function(){
            ctx.drawImage(base_image, 0, 0,800,400);
            
      };
0 likes
6 replies
neilstee's avatar

@david001 I think it will block ALL requests to that image because they are not allowed to that's why you need to configure it. Read the article I sent and see if that works.

david001's avatar

If i remove base_image.crossOrigin = "Anonymous" from code, image will be shown and no CORS error but I get another error zxcxz:257 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at HTMLCanvasElement.

Please or to participate in this conversation.