JavaScript 无法以编程方式下载图像（得到 403）

Question

在我的网站上，我有一个按钮，每当用户点击它时，它都会随机下载一张图片，下面是下载图片的代码：

const downloadImg = (src) => {
    const imgName = src.replace(/^.*[\\\/]/, '');

    var a = document.createElement('a');
    a.href = src;
    a.download = imgName;
    a.click();
};

这对于来自开放网站（如 google.com 或 Wikipedia commons）的图像完全适用

但是，对于来自诸如 Pixabay、Pexels、Freepik 等网站的图片，它不会下载图片，而是在同一选项卡中打开图片 URL，并在控制台中显示 403 禁止错误

我完全明白为什么会发生这个错误，但我不明白如何解决它？如果我在图像上right-clicked 然后点击save image as 不会出现错误，我将能够正常下载图像，我如何以编程方式使用 javascript 执行此操作？

Answer 1

它使用此处接受的答案中的方法工作：Chrome 65 blocks cross-origin <a download>. Client-side workaround to force download?，稍作改动。不要使用“cors”模式，而是使用“no-cors”。显然，直接从 url 下载时，某些域会出现 cors 错误。

更新：如果服务器不允许跨域请求，它不起作用。使用“no-cors”发出请求将成功，但响应正文将不可用。所以这不是一个解决方案。