如何在React应用中跨域下载Azure Blob或Amazon S3文件？

先理清楚关键逻辑 #

浏览器弹下载确认框，主要是两个原因：一是浏览器本身的设置没开自动下载，二是后端返回文件时的响应头没配对。要做到像Google Drive那样流畅，得前后端一起配合。

必须做的后端配置 #

后端返回文件的时候，一定要加这两个响应头：

• Content-Disposition: attachment; filename="你的文件名.ext"：直接告诉浏览器“这是要下载的附件，别打开它”
• Content-Type: application/octet-stream：通用的二进制文件类型，避免浏览器想着在线预览（比如图片、PDF这类，浏览器可能直接打开而不是下载）

前端的实现方式 #

后端配好之后，前端随便选一种方式触发下载就行：

直接用a标签 #

<a href="/你的下载接口路径" download="要保存的文件名.ext">点我下载</a>

注：download属性是给文件指定保存名的，如果后端已经通过响应头指定了文件名，前端这个会覆盖它。

JS动态触发（比如按钮点击后先做逻辑） #

function triggerDownload() {
  const link = document.createElement('a');
  link.href = "/你的下载接口路径";
  link.download = "要保存的文件名.ext";
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

为啥你之前的方法没用？ #

• 光前端折腾download或者createObjectURL没用，后端没配Content-Disposition头的话，浏览器还是会弹确认框
• 如果用户浏览器本身没开「自动下载文件，不用问我」的设置，就算前后端都配对了，第一次还是会弹，但用户选了“始终允许”之后就不会再弹了

接近Google Drive体验的小细节 #

Google Drive是先验证你有没有权限下载，再返回带正确响应头的文件链接。你可以照着这个逻辑：前端先做用户权限校验，确认有权限后再触发下载请求，后端返回配置好响应头的文件，这样用户体验就跟Drive差不多了。

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