SpringBoot与Vue前后端分离跨域导致文件无法下载问题

SpringBoot与Vue前后端分离的情况下下载文件，如果不做特殊配置，会出现下载失败的清苦。这是因为浏览器有同源策略，即只允许在同一个域名下进行数据交互，如果请求方与响应体的协议、域名、端口不一致，就会存在跨域问题。即使后端已经配置了允许跨域访问，前端也关闭了vue的安全策略，但是在文件下载这里仍然不能正常下载，可能是因为浏览器默认情况下不允许跨域下载文件。而SpringBoot与Vue前后端分离下载文件跨域的问题解决办法如下：

方法1：在后端的响应体中设置允许跨域的头，如下：

private void genCode(HttpServletResponse response, byte[] data) throws IOException {
        response.reset();
        response.addHeader(\"Access-Control-Allow-Origin\", \"*\");
        response.addHeader(\"Access-Control-Allow-Methods\", \"GET, POST, PUT, DELETE\");
        response.setHeader(\"Content-Disposition\", \"attachment; filename=\\\"article.zip\\\"\");
        response.addHeader(\"Content-Length\", \"\" + data.length);
        response.setContentType(\"application/octet-stream; charset=UTF-8\");
        org.apache.commons.io.IOUtils.write(data, response.getOutputStream());
}

这种方式是输出流的形式，那么Vue是有专门接收流的方式的，而不能交给浏览器来自动处理流而实现下载文件（此坑）

方法2：这里给大家提供一个函数

    // 下载文件
    download(data) {
      let url = window.URL.createObjectURL(data)
      let link = document.createElement(\'a\')
      link.style.display = \'none\'
      link.href = url
      link.download = \"article.zip\" // 设置文件名
      document.body.appendChild(link)
      link.click()
      window.URL.revokeObjectURL(link.href);
    },

函数使用正确的姿势：

this.$http.get(\"请求地址\",{
        responseType: \'blob\'
      }).then(res => {
       
    this.download(res.data) // 将接收的流传入即可
})

SpringBoot与Vue前后端分离下载文件跨域问题的解决办法就是如上的方法，希望对你有帮助