React+Redux中获取Authorization Header返回undefined问题求助

问题根源 #

浏览器的CORS机制默认只会将简单响应头（如Content-Type、Cache-Control等）暴露给前端JavaScript代码，像Authorization这类非简单头，哪怕在Network面板中能看到，axios也无法直接读取，必须后端通过Access-Control-Expose-Headers明确声明允许暴露该头。

解决方案 #

1. 修改后端CORS配置，添加响应头暴露声明

在你的CORS过滤器doFilter方法中，新增Access-Control-Expose-Headers配置，指定要暴露的Authorization头：

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain filterChain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    HttpServletRequest request = (HttpServletRequest) req;
    String originHeader = request.getHeader("origin");
    response.setHeader("Access-Control-Allow-Origin", originHeader);
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE, OPTIONS");
    response.setHeader("Access-Control-Max-Age", "3000");
    response.setHeader("Access-Control-Allow-Headers", "*");
    // 新增：暴露Authorization响应头给前端
    response.setHeader("Access-Control-Expose-Headers", "Authorization");

    if ("OPTIONS".equalsIgnoreCase(request.getMethod())){
        response.setStatus(HttpServletResponse.SC_OK);
    } else {
        filterChain.doFilter(req, res);
    }
}

2. 确认后端登录接口确实返回了Authorization头

检查你的signInHandler方法，确保它在响应中正确设置了Authorization头。比如如果是生成JWT令牌的场景，需要手动添加到响应头中：

@GetMapping("/signin")
public ResponseEntity<User> signInHandler(Authentication auth) throws BadCredentialsException {
    Optional<User> optionalUser = userRepository.findByEmail(auth.getName());

    if (optionalUser.isPresent()) {
        // 示例：生成并添加Authorization头（根据你的实际认证逻辑调整）
        HttpHeaders responseHeaders = new HttpHeaders();
        String jwtToken = generateJwtToken(auth); // 假设你有生成令牌的方法
        responseHeaders.set("Authorization", "Bearer " + jwtToken);
        
        return new ResponseEntity<>(optionalUser.get(), responseHeaders, HttpStatus.OK);
    }
    throw new BadCredentialsException("Invalid username or password");
}

3. 前端验证获取逻辑

你的前端axios获取头的代码是正确的（response.headers.authorization，axios会自动将响应头转为小写），现在后端配置完成后，应该能正常拿到值：

const authorizationHeader = response.headers.authorization;
console.log(authorizationHeader); // 现在应该能输出正确的头值

补充说明 #

• 若需要暴露多个非简单头，可用逗号分隔：response.setHeader("Access-Control-Expose-Headers", "Authorization, X-Custom-Header")
• 确保后端实际返回了Authorization头，否则即使配置了暴露，前端也拿不到值（可在Network面板中确认响应头的存在）

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