facing CORS error while downloading image through html2canvas in React

user_8544274 0
Viewed 1481

I am facing CORS error while downloading the image from a given url from a laravel api. when i download the image it is blanked . but through the laravel api i am able to show the image in React.js app

the error which i received in a console

Access to image at 'https://api.osdtrips.com/images/781595409240.png' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 


cache-storage.ts:131 GET https://api.osdtrips.com/images/781595409240.png net::ERR_FAILED


index.js:1 17375d3eb78 503ms Error loading image https://api.osdtrips.com/images/781595409240.png

I am using React.js as a front end & Laravel as a back-end .

and here is the code that i am using in react.js for downloading the image :-

downloadImage() {
 html2canvas(document.querySelector("#divToPrint"), {
  logging: true,
  letterRendering: 1,
  allowTaint: true,
  useCORS: true,
  scrollX: 0,
  scrollY: -window.scrollY,

  async: true,
}).then((canvas) => {
  var a = document.createElement("a");
  a.href = canvas
    .toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
  a.download = "somefilename.jpg";
  a.click();
});

}

namecheap html2canvas laravel reactjs javascript
1 Answers

There is no Access-Control-Allow-Origin header associated with the resource.

It means that the Same Origin Policy is enforced as normal. No origins are granted permission. Only the resource's origin.

Could you download all the needed assets and use them locally?

user_134883680
Related