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前后端分离下载文件跨域问题的解决办法就是如上的方法，希望对你有帮助
