前后端分离，文件下载如何处理？

Question

• 正常情况下只需要请求url地址，后端会强制浏览器下载（此处由laravel header头处理）
• 项目前后端使用api形式构建，前端每次请求都需要向后端发送token令牌。
• vue里面<a href="/images/myw3schoolimage.jpg" download="w3logo">好像这样可以下载，但是这里请求未带token，所以改用了fecth的形式
• 现在后端验证了token，返回了数据（乱码形式），却并没有强制浏览器下载，请问该如何处理？

Answer 1

看到后端是PHP，header修改，最后把图片直接echo出来，而不是返回给前端。

Answer 2

你可以试试这个

function saveFile(url) {
  return new Promise(function(resolve, reject) {
    // Get file name from url.
    var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
      resolve(xhr);
    };
    xhr.onerror = reject;
    xhr.open('GET', url);
    xhr.send();
  }).then(function(xhr) {
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
    a.download = filename; // Set the file name.
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    return xhr;
  });
}

function download(urls) {
  return Promise.all(urls.map(saveFile));
}

来源

Answer 3

返回一个下载的url链接地址呀

Answer 4

（解决了）其实就是搞清楚一个问题关键点：请求一个url，该url需要带上token信息，请求验证通过后，后端会强制浏览器下载；
上面问题有个命题误区就是一开始限定了token必须放在header里面，所以必须要使用fetch的形式去获取，然后一直纠结怎么把fetch到的数据转成文件；
其实只需要把token放在url里面让后端在url取出并验证，响应自然就成了下载啦。

Answer 5

验证token以后。返回图片地址/images/myw3schoolimage.jpg