前后端分离发起axios请求，前端无法获取response header的内容问题解决

最新推荐文章于 2025-03-07 14:54:19 发布

悲喜ttgg

最新推荐文章于 2025-03-07 14:54:19 发布

阅读量6.8k

点赞数 6

文章标签： ajax spring boot vue.js

本文链接：https://blog.csdn.net/qq_34267765/article/details/124153796

版权

问题描述：在springboot jwt结合vue axios 做一个验签的功能，后端验签通过拦截器放行，但是前端无法拿到后端在header的状态码，从而前端响应拦截器无法生效。(这是我的问题这里也是浅谈。)

一开始我是这样写的：从浏览器的请求响应中可以看到我的"code1","3008"，就是在前端响应拦截器中无法获取code1。

            response.setHeader("code1","3008");
            response.setHeader("massage","登录有效");
            response.setHeader("token", token);

解决：主要问题就是跨域，因为是跨前后端分离，默认reponse header只能取到以下

Content-Language
Content-Type
Expires
Last-Modified
Pragma

5个默认值,要想取得其他的字段需要在服务器端设置Access-Control-Expose-Headers 配置前端想要获取的header 后端拦截器代码展示：

public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        String token = request.getHeader("token");
        boolean verify = tokenUtils.verify(token);
        System.out.println(verify);
        if (verify) {
            // 由于跨域 必须自定义header Access-Control-Expose-Headers 属性才会被暴露出来
            response.addIntHeader("code", 300);
            response.setHeader("Access-Control-Expose-Headers","code");
            return true;
        } else {
            response.addIntHeader("code", 301);
            response.setHeader("Access-Control-Expose-Headers","code");
            return false;
        }
    }

前端响应拦截器代码展示如下：

// 添加响应拦截器 
axios.interceptors.response.use((res) => {
	console.log(res);
	if (res.headers.code != 300) {
		router.replace("/login");
	}
	return res;
});

这样我的问题就解决了，只是浅谈。