在React中通过html2canvas下载图像时面临CORS错误

Question

从laravel api的给定url下载图像时，我面临CORS错误。当我下载图像时，它是空白的。但通过laravel api，我可以在React.js应用中显示图像

我在控制台中收到的错误

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

我使用React.js作为前端&Laravel作为后端。

这是我在react.js中用于下载图像的代码：-

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();
});

}

Answer 1

没有与资源关联的Access Control Allow Origin标头。

这意味着同源政策将正常执行。不允许任何来源。只有资源的来源。

你能下载所有需要的资产并在本地使用吗？