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

前言：最近负责的项目需要获取后端接口的response header数据，前端使用的axios，结果始终接受不到，今天记录一下解决办法。

原因分析

主要问题就是跨域。因为前后端分离导致调取接口跨域，默认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);
});