Angular 16请求Java REST API时Header中Token为null的问题求助

Postman请求正常但Angular请求后端获取不到Token，核心原因大概率是请求头未正确携带或跨域配置未允许Authorization头，结合你的代码，给出以下排查和解决步骤：

1. 修复Angular请求头的创建逻辑 #

你的agregarAuthorizationHeader方法复用了类成员变量httpHeaders，而Angular的HttpHeaders是不可变对象，append方法会返回新实例而非修改原对象。如果成员变量未正确初始化或重复调用导致多次append，可能出现头信息异常。

修改方法为每次创建新的HttpHeaders实例：

private agregarAuthorizationHeader(): HttpHeaders {
  let headers = new HttpHeaders(); // 每次创建新实例
  const token = this.authService.token;
  if (token) {
    headers = headers.append('Authorization', `Bearer ${token}`);
  }
  return headers;
}

同时确认authService.token确实能正确获取登录后的JWT：检查AuthService中token的取值逻辑，比如是否从localStorage读取：

// 在AuthService中
get token(): string | null {
  return localStorage.getItem('authToken'); // 确保登录后已存储
}

2. 配置Spring后端的CORS允许Authorization头 #

浏览器的跨域请求会自动发起OPTIONS预检请求，若后端未配置允许携带Authorization头，浏览器会拦截真实请求，导致后端无法收到Token。

在Spring Security配置中添加全局CORS配置：

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .cors(cors -> cors.configurationSource(request -> {
                CorsConfiguration config = new CorsConfiguration();
                config.setAllowedOrigins(Collections.singletonList("http://localhost:4200")); // Angular项目地址
                config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
                config.setAllowedHeaders(Arrays.asList("Authorization", "Content-Type")); // 明确允许Authorization头
                config.setAllowCredentials(true);
                return config;
            }))
            .csrf(csrf -> csrf.disable()) // 根据需求决定是否禁用CSRF
            // 其他Security配置（OAuth2、JWT过滤器等）
            .addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
        
        return http.build();
    }

    // 注入你的JWT过滤器
    @Autowired
    private JwtAuthenticationFilter jwtAuthenticationFilter;
}

如果使用Controller级别的@CrossOrigin，需确保配置正确：

@RestController
@RequestMapping("/api/usuarios")
@CrossOrigin(origins = "http://localhost:4200", allowedHeaders = {"Authorization", "Content-Type"}, allowCredentials = true)
public class UsuarioController {
    // 接口方法
}

3. 验证请求头是否实际发送 #

在Angular中打开浏览器开发者工具（F12），切换到Network标签，发起getUsuarios请求，查看Request Headers中是否存在Authorization: Bearer xxx：

• 如果不存在：检查token是否获取正确，或请求头创建逻辑是否有问题
• 如果存在但后端仍接收不到：确认CORS配置是否生效，是否OPTIONS请求已被正确处理

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