解决SpringBoot与Vue前后端分离下载文件跨域的问题

蔚落 2022-12-17 08:51 31阅读 0赞

虽然是同一个域名，只要请求方与响应体的协议、域名、端口不一致都会存在跨域问题。

虽然后端配置了允许跨域访问、前端也关闭了vue的安全策略，但是在文件下载这里，仍然不能正常下载。

第一：在后端的响应体中设置允许跨域的头，如下：

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是有专门接收流的方式的，而不能交给浏览器来自动处理流而实现下载文件（此坑）

第二：

这里给大家提供一个函数

// 下载文件
        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) // 将接收的流传入即可
    })