React中使用Axios无法获取Authorization响应头问题排查

你遇到的问题核心是浏览器的CORS安全限制：虽然后端确实返回了Authorization响应头，但浏览器默认不会把非标准响应头暴露给前端JavaScript代码，只有Content-Type、Cache-Control这类标准响应头能直接被获取到。Postman不受浏览器CORS规则约束，所以能看到所有响应头。

解决步骤 #

1. 后端配置允许暴露Authorization头 #

需要在后端的CORS配置中添加Access-Control-Expose-Headers响应头，明确指定要将Authorization暴露给前端。以下是几种常见后端框架的配置示例：

• Spring Boot（Java）：
  可通过配置类或@CrossOrigin注解实现：

  // 全局配置类方式
  @Configuration
  public class CorsConfig {
      @Bean
      public CorsFilter corsFilter() {
          CorsConfiguration config = new CorsConfiguration();
          config.addAllowedOriginPattern("*"); // 根据实际需求设置允许的源
          config.addAllowedMethod("*");
          config.addAllowedHeader("*");
          config.addExposedHeader("Authorization"); // 关键：暴露Authorization头
          UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
          source.registerCorsConfiguration("/**", config);
          return new CorsFilter(source);
      }
  }
  
  // 单个接口注解方式
  @CrossOrigin(exposedHeaders = "Authorization")
  @PostMapping("/auth/login")
  public ResponseEntity<?> login(...) {
      // 接口逻辑
  }
  

• Node.js/Express：
  使用cors中间件时指定exposedHeaders参数：

  const cors = require('cors');
  app.use(cors({
      exposedHeaders: ['Authorization'] // 暴露Authorization头
  }));
  

• Python/Flask：
  借助flask-cors扩展配置expose_headers：

  from flask import Flask
  from flask_cors import CORS
  
  app = Flask(__name__)
  CORS(app, expose_headers=['Authorization']) # 关键配置
  

2. 前端代码验证 #

后端配置完成后，你的前端代码无需修改就能正常获取Authorization头。另外注意：axios会把响应头的键名统一转为小写，所以用response.headers.authorization和response.headers["Authorization"]的效果是一致的。

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