如何使浏览器从XHR请求下载文件

Question

我正在向服务器发送xhr请求以下载文件。我在请求中包含授权令牌，因此如果不使用xhr，就无法下载文件。当从服务器收到响应时，我应该采取哪些步骤才能使浏览器下载文件？服务器应该包含哪些头部信息？

- courses.indepth.dev

---

你可以将服务器响应填充到数据URL中，将其放在<a download>中并触发点击。请注意，download属性的支持情况不是很好。或者，您可以使用普通的表单提交（而非XHR），将令牌发送到隐藏输入框中，而不是请求头中。 - Amadan

@Amadan，谢谢。这些是唯一的选项，对吗？ - Max Koretskyi

我不会说那个，但是我能想到的只有这些。 - Amadan

看起来这个可以吗？ - Max Koretskyi

是的，这就是将服务器响应填充到数据URL中，将其放在<a download>上并触发点击的代码。 - Amadan

Answer 1

这是我用过并且有效的代码。虽然不是最干净的方式，但我用它来测试。它可以展示一张图片。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
    var downloadUrl = URL.createObjectURL(xhttp.response);
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    a.href = downloadUrl;
    a.download = "";
    a.click();
}
};
xhttp.open("GET", fileUrl, true);
xhttp.responseType = "blob";
xhttp.setRequestHeader('Authorization', token);
xhttp.send();

这段代码不是必须的，只是在我的情况下需要它：

xhttp.setRequestHeader('Authorization', token);

这个链接也可能很有用：发送和接收二进制数据

- tarasikarius