如何让使用HTTPS链接的下载按钮正常实现下载功能？

问题根因 #

<a> 标签的 download 属性仅对同域资源生效，你尝试下载的是其他站点的跨域资源，浏览器出于同源策略限制会忽略 download 属性，直接跳转打开资源而不触发下载。

可行解决方案 #

• 后端代理中转
  在你自己的服务端开发代理接口，由服务端先请求目标跨域资源，再将资源返回给前端。此时返回的资源和你的站点同域，download 属性可以正常生效。
• 前端 Blob 处理（需目标资源支持CORS）
  如果目标资源的响应头已经配置了 Access-Control-Allow-Origin 允许你的站点跨域访问，可以通过 fetch 请求将资源转成 Blob 对象，再生成临时下载链接触发下载，示例代码如下：

  async function downloadCrossOriginFile(resourceUrl, saveFileName) {
    const response = await fetch(resourceUrl);
    const fileBlob = await response.blob();
    const tempBlobUrl = window.URL.createObjectURL(fileBlob);
    const downloadLink = document.createElement('a');
    downloadLink.href = tempBlobUrl;
    downloadLink.download = saveFileName;
    downloadLink.click();
    // 释放临时Blob地址占用的内存
    window.URL.revokeObjectURL(tempBlobUrl);
  }
  
  // 调用示例
  downloadCrossOriginFile('https://www.samanthaming.com/logo.png', 'samanthaming-logo.png')
  

• 第三方站点配置响应头（需可控目标站点）
  如果你可以控制资源所在的第三方站点，可以给对应资源的响应头添加 Content-Disposition: attachment; filename="自定义文件名.png"，浏览器识别到这个响应头后，即使是跨域资源也会直接触发下载。

内容的提问来源于stack exchange，提问作者Chris Sigo Obidimma