如何配置React以接收后端返回的自定义Authorization响应头？

核心原因 #

浏览器的同源策略（CORS）存在限制：默认只有简单响应头（如Cache-Control、Content-Type等）会自动暴露给前端JS。像Authorization这类非简单/自定义响应头，后端必须显式配置Access-Control-Expose-Headers允许暴露，否则浏览器会直接隐藏该头，前端JS完全无法读取。而Postman不受同源策略约束，所以能正常看到所有响应头。

解决方案 #

1. 后端Spring配置CORS时显式暴露Authorization头 #

根据你使用的配置方式，选择以下一种：

方式一：局部接口配置（@CrossOrigin注解）

在需要返回Authorization头的Controller类或方法上添加：

@CrossOrigin(exposedHeaders = "Authorization")

方式二：全局CORS配置（推荐，覆盖所有接口）

创建Spring Boot全局CORS配置类：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000") // 替换为你的前端实际地址
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .exposedHeaders("Authorization") // 关键：指定要暴露的响应头
                .allowCredentials(true);
    }
}

如果集成了Spring Security，需在Security配置中启用CORS：

@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors() // 启用CORS，使用上述全局配置
            .and()
            .authorizeRequests()
            // 其他权限配置...
            .and()
            .csrf().disable();
    }
}

2. 前端Axios读取响应头的正确方式 #

后端配置生效后，前端可直接从Axios响应的headers中读取，但注意Axios会将响应头键名转为小写：

// 示例：ApiService.js中的登录请求
async login(credentials) {
  const response = await axios.post('/api/login', credentials);
  // 读取小写的authorization头
  const token = response.headers.authorization;
  localStorage.setItem('token', token);
  return response.data;
}

排查验证点 #

• 打开浏览器Network面板，查看对应请求的Response Headers，确认存在Access-Control-Expose-Headers: Authorization，这是后端配置生效的标志。
• 不要尝试在Axios拦截器中手动添加该头——后端未暴露的话，浏览器不会将其传递给JS，拦截器里只能拿到空值。
• 确保后端allowedOrigins配置的地址与前端完全一致（比如本地开发时要写全http://localhost:3000，不能省略协议或端口）。

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