解决前后端分离中文件传输跨域失败问题

sun cat

已于 2022-03-01 15:49:06 修改

阅读量5.2k

点赞数 16

CC 4.0 BY-SA版权

分类专栏：实际中一些问题文章标签：文件下载CORS 前端CORS java 下载接口前后分离下载文件报错 Access-Control

于 2021-03-15 22:27:16 首次发布

本文链接：https://blog.youkuaiyun.com/github_37130188/article/details/114854823

实际中一些问题专栏收录该内容

12 篇文章

订阅专栏

本文记录了解决一个特定的文件下载接口跨域(CORS)问题的过程。通过在后端代码中正确设置响应头来确保跨域请求被正确处理，从而避免了前端在尝试下载文件时出现的跨域错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

笔者在之前的开发中就遇到过这种情况：给与后端的文件下载接口，我在浏览器在postman上试过都是可以的，但在前端上就报这种错误：

看上面的介绍是说前后端跨域问题，可是后端代码中明明配置了放行所有请求，其他接口也没有报这种CORS跨域问题，偏偏这个传输文件接口报跨域问题。我当时的代码类似是这样的

response.reset();
response.setHeader("Content-disposition", "attachment; filename="+fileName);
response.setContentType("application/msexcel");

out = response.getOutputStream();
wb.write(out);

我看其他博客也是这样写的，我想了好久也想不出什么问题，可偏偏报CORS跨域问题。也尝试调整了Spring MVC的过滤，似乎没什么用。

当我在思考的时候，无意间看到这个。

response.reset();

当时在想：有没有这么一种可能,响应头里本来有允许跨域的头字段信息，但response.reset();的时候把它给去掉了，因此就造成前端无法下载并报跨域问题。于是尝试加上这几行代码。

response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
response.addHeader("Access-Control-Allow-Headers", "Content-Type");

response.reset();

//添加响应头的跨域信息--开始
response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
response.addHeader("Access-Control-Allow-Headers", "Content-Type");
//添加响应头的跨域信息--结束

response.setHeader("Content-disposition", "attachment; filename="+fileName);
response.setContentType("application/msexcel");

out = response.getOutputStream();
wb.write(out);

当我加上这两句后，前端再也不报CORS问题，并且能成功下载文件。哈哈，果然是这个原因，我猜得没错。