单个XMLHttpRequest请求触发多份重复文件下载，如何避免？

你这段代码的问题很明确：同时发起了两次指向同一个地址的请求——window.location.assign(location)会让浏览器跳转至目标地址并触发下载，而XMLHttpRequest的xhr.send()又单独发起了一次GET请求到相同地址，自然会产生重复下载的情况。

解决办法：二选一即可 #

不需要同时使用两种请求方式，根据你的需求选其中一种：

• 如果只是需要简单触发下载，直接保留页面跳转方式，删掉XMLHttpRequest相关代码：

  var location = abc+ "/tasksample/";
  window.location.assign(location);
  

• 如果需要用XMLHttpRequest做额外处理（比如监听下载进度），就删掉window.location.assign(location)，同时确保后端正确设置下载响应头，再通过前端创建标签触发下载：

  var location = abc+ "/tasksample/";
  var xhr = new XMLHttpRequest();
  xhr.open("GET", location, true);
  xhr.responseType = 'blob'; // 设置响应为二进制流
  xhr.onload = function() {
      if (xhr.status === 200) {
          var blob = xhr.response;
          var downloadLink = document.createElement('a');
          var url = window.URL.createObjectURL(blob);
          downloadLink.href = url;
          downloadLink.download = 'sample-file'; // 自定义下载文件名
          document.body.appendChild(downloadLink);
          downloadLink.click();
          // 清理临时资源
          window.URL.revokeObjectURL(url);
          document.body.removeChild(downloadLink);
      }
  };
  xhr.send();
  

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