解决Axios发送Ajax请求获取不到Header响应头里的Token

小咪咪 2023-03-14 08:01 607阅读 0赞

## 问题描述 ##

在做登录功能的时候 调用登录接口 想获取Header里的Token 然而发现里面并没有Token：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70]  
在用Postman测试的时候发现是正常的：  
![在这里插入图片描述][20200516155802202.png]

## 原因 ##

浏览器默认只能访问以下几种响应头：

*  Cache-Control
 *  Content-Length
 *  Content-Type
 *  Expires
 *  Pragma

若想让浏览器能访问到其它响应头 则需在服务器上设置**Access-Control-Expose-Headers**  
其值为要被访问的响应头的属性名

## 解决方法 ##

在拦截器里进行配置 添加响应头

public class JWTAuthenticationFilter extends UsernamePasswordAuthenticationFilter {
        
    
        ...
        
        @Override
        protected void successfulAuthentication(HttpServletRequest request,HttpServletResponse response,FilterChain chain,Authentication authResult) throws IOException {
        
           
            ...
    
            // 让浏览器能访问到其它响应头
            response.addHeader("Access-Control-Expose-Headers","token");
    
            ...
        }
        
        ...
        
    }

成功拿到token：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 1]

--------------------

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70]: /images/20230312/5f7909daf5c341c8af4c44548becda94.png
[20200516155802202.png]: /images/20230312/7a1e6e91f4274d87a2b045ab72884fca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BpY29uam8_size_16_color_FFFFFF_t_70 1]: /images/20230312/42cb90c7ca66466eb5a8b915e373e1cc.png