How do I handle CORS with html2Canvas and AWS S3 images?

Question

I know similar questions have been asked before but I still can\'t make it work. I have a div with images inside of it loaded from a bucket in AWS s3, they load per

Answer 1

I solved this error with adding crossOrigin attribute at IMG tag. So, your code will look like (tag at React js):

And my configuration at S3 bucket with CORS:

    http://localhost:8000
    GET
    HEAD
    PUT
    POST
    DELETE
    3000
    Authorization


    https://testing.d1wr8lk28mi6l0.amplifyapp.com
    GET
    HEAD
    PUT
    POST
    DELETE
    3000
    Authorization

HTML2CANVAS:

 html2canvas(getWrapper, { allowTaint: true, useCORS: true, logging: true })
  .then((canvas) => {
    const imgData = canvas.toDataURL('image/png');
    console.log(imgData);
  });