如何在JavaScript中通过URL下载图片 解决a标签跨域资源跳转问题

问题根因 #

a标签的download属性仅对同源资源生效，当指向跨域的互联网图片资源时，浏览器会遵循同源策略限制，忽略download属性直接打开资源，不会触发下载行为。你贴的代码就是典型的跨域资源使用download属性无效的场景。

可行解决方案 #

方案1：后端代理中转下载（最稳定，无跨域限制） #

由你的服务端先请求目标图片资源，再把资源以文件流的形式返回给前端，同时设置以下响应头即可强制触发下载：

• Content-Disposition: attachment; filename="自定义文件名.png"
• Content-Type: application/octet-stream
  前端直接请求自己的服务端代理接口即可，不会触发跨域问题。

方案2：纯前端实现（要求目标图片服务器配置了CORS，允许你的域名跨域访问） #

如果目标资源服务器开放了CORS权限，你可以通过fetch把图片转成Blob对象，再生成临时URL触发下载，示例代码如下：

<a href="javascript:downloadImg()">下载图片</a>
<script>
async function downloadImg() {
  const imgUrl = 'https://www.enovaenergy.com.au/hs-fs/hubfs/Enova_July_2020/Images/Enova-Logotypes-02.png?width=624&name=Enova-Logotypes-02.png'
  // 请求图片资源转为Blob格式
  const res = await fetch(imgUrl)
  const blob = await res.blob()
  // 生成临时下载链接
  const tempUrl = window.URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = tempUrl
  a.download = 'Enova-Logo.png' // 可自定义下载后的文件名
  a.click()
  // 释放临时URL占用的资源
  window.URL.revokeObjectURL(tempUrl)
}
</script>

注意：如果目标图片服务器没有配置CORS允许你的域名跨域访问，该方案会触发跨域错误无法使用。

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