如何下载无CORS支持的跨域URL中的图片资源

CORS是浏览器的同源安全限制，仅会限制JS代码发起的资源读取请求，根据你的使用场景可以选择以下3种落地方式：

方案1：纯前端a标签触发下载（无额外开发成本，适合简单场景） #

不需要自定义文件名、不需要打包为压缩包的场景下，直接通过动态生成a标签触发下载即可，该逻辑不会触发CORS校验：

function batchDownloadImage(urlList) {
  urlList.forEach((imgUrl, idx) => {
    const link = document.createElement('a')
    link.href = imgUrl
    link.download = `image_${idx + 1}`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  })
}

注意事项：

1. 跨域场景下部分浏览器会忽略download属性设置的自定义文件名，默认使用图片资源本身的文件名
2. 如果目标站点配置了Content-Disposition: inline响应头，部分浏览器会直接打开图片而非触发下载
3. 该方案无法实现多张图片打包为单个ZIP下载的需求

方案2：服务端中转代理（通用稳定，适合所有场景） #

如果需要自定义文件名、打包下载、或者需要对图片做预处理，通过自有服务端做中转即可规避CORS限制：

• 前端将所有图片URL批量传给后端接口
• 后端直接请求这些图片资源（服务端请求不受CORS规则限制）
• 后端可将图片打包为ZIP包返回，也可添加Content-Disposition: attachment响应头后单张返回给前端触发下载

方案3：修改浏览器配置（仅适合内部工具场景） #

如果是仅面向内部用户使用的工具，可以引导用户安装CORS解禁插件，或者启动浏览器时关闭同源安全限制，之后即可通过JS直接读取跨域图片的二进制内容，自定义打包、重命名后触发下载。

注意：该方案存在安全风险，禁止面向公网普通用户使用。

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