无法获取Response Header内容的问题

无法获取Response Header内容的问题

因为公司的接口返回的格式都是固定的,所以我们前端在请求的时候都会对response进行统一处理,例如接口请求成功返回response.data.data。但是最近遇到了一个很神奇的问题,无法获取到Response Header的值。

问题的发现及排查

我们公司的接口服务器使用Nginx做了统一的代理处理,我们其实可以直接通过设置axios的baseURL来进行请求也就是直接使用接口服务器域名+接口地址拼接进行请求,但是这个新的项目默认使用的是前端代理,所以我就使用的前端代理。

然后我就发现在联调某个接口的时候使用代理和不使用代理,这个接口的返回值居然是不一样的。于是我去拦截器中查看了一下逻辑,发现为了使用文件下载,后端会使用Content-Disposition 来指定接口返回内容,如果指定了该字段则说明该接口返回的是二进制文件,此时对于接口的返回值不会进行处理而是直接返回整个response。然后我打印了一下这个值,发现前端其实一直都没有接收到这个值。

原因

原因很简单,浏览器因为安全做出了限制,只有七种 simple response headers默认暴露可以被浏览器获取:

  1. Cache-Control
  2. Content-Language
  3. Content-Length
  4. Content-Type
  5. Expires
  6. Last-Modified
  7. Pragma

解决

需要服务器设置响应首部 Access-Control-Expose-Headers暴露出允许获取的Response Header

如果没有使用Nginx做转发的可以直接设置请求头:

java 复制代码
public boolean preHandle(HttpServletRequest httpServletRequest,
                             HttpServletResponse httpServletResponse,
                             Object object) throws Exception{
        httpServletResponse.setHeader("Access-Control-Expose-Headers","Content-Disposition");
        return true;
}

如果是使用Nginx的话则需要在Nginx添加如下配置:

bash 复制代码
add_header 'Access-Control-Expose-Headers' 'Content-Disposition';
相关推荐
雨落Liy2 天前
Nginx 从入门到进阶:反向代理、负载均衡与高性能实战指南
运维·nginx·负载均衡
Yyyy4822 天前
Nginx负载均衡集群实验步骤
运维·nginx·负载均衡
qq_264220893 天前
Nginx优化与 SSL/TLS配置
运维·nginx
matlab的学徒3 天前
Web与Nginx网站服务(改)
linux·运维·前端·nginx·tomcat
邂逅星河浪漫3 天前
【Docker+Nginx+Ollama】前后端分离式项目部署(传统打包方式)
java·nginx·docker·部署
IT成长日记3 天前
【Nginx开荒攻略】Nginx主配置文件结构与核心模块详解:从0到1掌握nginx.conf:
linux·运维·nginx·配置文件
ZzzZZzzzZZZzzzz…3 天前
Nginx_Tomcat综合案例
运维·nginx·tomcat·负载均衡·rhce·反向代理·https加密服务
VueVirtuoso4 天前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx
007php0074 天前
Redis高级面试题解析:深入理解Redis的工作原理与优化策略
java·开发语言·redis·nginx·缓存·面试·职场和发展
Xxtaoaooo4 天前
Nginx 502 网关错误:upstream 超时配置的踩坑与优化
运维·nginx·负载均衡·502错误·upstream超时