后端接口响应头个数和前端获取不一致的解决方案

response.setContentType("application/vnd.ms-excel;charset=UTF-8");
response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));

后端已经设置了响应头"Content-Disposition",前端console打印却获取不到。

是因为浏览器的安全策略会隐藏一些响应头来保证安全,因此要想前端获取的到指定的响应头。

如在nginx代理后端接口的地方,添加个add_header

location / {

 proxy_pass '后端地址:端口号';
 
 add_header ‘响应头属性’ application/json;

}

这样这些个响应头属性就会被前端获取得到。

还可以在response中设置一些浏览器隐藏的响应头允许它对外暴露。

response.setHeader("Access-Control-Expose-Headers", "响应头属性1", "响应头属性2");

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
出现这种情况,有可能是因为后端生成的Excel文件存储位置与前端访问路径不一致导致的。为了解决这个问题,您需要将生成的Excel文件存储到前端可以访问到的路径下,或者将生成的Excel文件通过接口返回给前端进行下载。 以下是两种解决方案: 1. 存储到前端可以访问到的路径下 在后端生成Excel文件时,可以指定生成文件的存储路径。如果您希望前端能够访问到该文件,可以将生成的Excel文件存储到前端可以访问到的路径下,比如Web服务器的根目录下的一个文件夹中。然后在前端中通过相应的路径进行下载。 2. 通过接口返回给前端进行下载 在后端生成Excel文件后,可以通过接口将Excel文件返回给前端进行下载。前端通过访问该接口获取Excel文件,然后通过浏览器下载该文件。在后端实现接口时,需要设置响应,使得浏览器能够正确地下载Excel文件。示例代码如下: ``` // 后端接口 [HttpGet] public IActionResult DownloadExcelFile() { // 生成Excel文件 string filePath = "xxxxxx"; // 设置响应 var stream = System.IO.File.OpenRead(filePath); return File(stream, "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", "excel_file_name.xlsx"); } // 前端代码 axios({ method: 'get', url: '/api/DownloadExcelFile', responseType: 'blob' }).then((response) => { const url = window.URL.createObjectURL(new Blob([response.data])); const link = document.createElement('a'); link.href = url; link.setAttribute('download', 'excel_file_name.xlsx'); document.body.appendChild(link); link.click(); }); ``` 上述代码中,后端接口通过File方法将Excel文件返回给前端前端接收到响应后通过创建一个a标签,设置其href属性为Excel文件的URL,然后模拟用户点击该标签实现浏览器下载Excel文件的功能。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值