HTML/JavaScript中通过URL下载跨域图片失效如何解决

实现第三方存储图片的网页下载功能时，已配置目标图片URL地址，功能运行不符合预期：点击下载按钮后未触发文件下载，而是直接在页面打开目标图片地址仅展示图片内容，无法定位故障原因，原始实现代码如下：

document.querySelector("#memeDownload").addEventListener("click", function () {
    var a = $("<a>").attr("href", "https://iynmemes.netlify.app/images_memes/meme0.jpg").attr("download", "Meme(IYN").appendTo("body");
    a[0].click();
    a.remove();
});

• 代码中download属性值书写不完整：属性值为Meme(IYN，缺少右括号与文件后缀，部分浏览器无法正常识别该属性配置
• 核心限制：<a>标签的download属性仅对同源资源生效，跨域第三方站点的资源如果没有返回允许跨域访问的CORS响应头，浏览器会直接忽略download属性，执行跳转打开资源的默认行为，这是浏览器的安全策略限制，不是代码语法问题。

如果目标图片所在站点配置了允许跨域访问的响应头，可以通过将图片资源转为Blob二进制流、生成本地Blob URL的方式触发下载，修复后代码如下：

document.querySelector("#memeDownload").addEventListener("click", async function () {
    const targetImgUrl = "https://iynmemes.netlify.app/images_memes/meme0.jpg";
    try {
        // 跨域请求图片资源
        const response = await fetch(targetImgUrl, { mode: "cors" });
        const imgBlob = await response.blob();
        // 生成同源Blob地址
        const blobUrl = URL.createObjectURL(imgBlob);
        const downloadLink = $("<a>")
            .attr("href", blobUrl)
            .attr("download", "Meme(IYN).jpg") // 补全完整文件名与后缀
            .appendTo("body");
        downloadLink[0].click();
        downloadLink.remove();
        // 释放Blob地址，避免内存占用
        URL.revokeObjectURL(blobUrl);
    } catch (error) {
        console.error("下载失败，目标资源不允许跨域访问", error);
    }
});

如果目标图片所在站点未配置跨域允许头，前端无法单独绕过该限制，需要自行搭建服务端代理，将目标图片拉取到自有服务端后返回同源资源地址，前端请求自有服务端地址即可正常触发下载。

内容的提问来源于stack exchange，提问作者user17765346