React中Axios获取响应头Authorization返回undefined的解决办法

1. 后端配置CORS暴露自定义响应头 #

跨域场景下，浏览器默认仅允许前端访问CORS安全列表内的响应头（如Content-Type、Cache-Control等），自定义的Authorization头需要后端明确配置暴露，否则前端无法读取。

你需要在后端服务中添加Access-Control-Expose-Headers响应头，指定Authorization：

不同后端框架示例： #

• Spring Boot（Java）：
  在CORS配置类中添加：

  @Configuration
  public class CorsConfig implements WebMvcConfigurer {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
          registry.addMapping("/**")
                  .allowedOrigins("http://localhost:3000") // 你的前端地址
                  .allowedMethods("*")
                  .allowedHeaders("*")
                  .exposedHeaders("Authorization") // 关键：暴露Authorization头
                  .allowCredentials(true);
      }
  }
  

• Express（Node.js）：
  使用cors中间件时配置：

  const cors = require('cors');
  app.use(cors({
      origin: 'http://localhost:3000', // 前端地址
      credentials: true,
      exposedHeaders: ['Authorization'] // 暴露Authorization
  }));
  

2. 前端注意响应头字段的大小写 #

Axios会自动将响应头字段转换为小写，所以你需要用小写的键来获取：

.then(res => {
  // 正确写法：用小写的authorization
  console.log(res.headers.authorization);
  // 或者用方括号形式
  console.log(res.headers['authorization']);
})

3. 验证配置是否生效 #

配置完成后，重新启动后端服务，再次发起登录请求：

• 在浏览器网络面板的响应头中，确认能看到Access-Control-Expose-Headers: Authorization
• 此时前端就能正常读取到JWT Token了

内容的提问来源于stack exchange，提问作者kd02109