Spring+Angular添加@CrossOrigin后，带Authorization Header的请求仍遭CORS拦截

针对你遇到的CORS报错+JWT解析异常问题，核心原因是浏览器预请求（OPTIONS）未被后端正确放行，再加上带Authorization头时CORS配置有特殊要求，按以下步骤排查修复：

1. 优先放行OPTIONS预请求 #

浏览器发送带自定义头（比如Authorization）的请求前，会先发OPTIONS预请求确认权限，但这个预请求里不会携带Authorization头。如果你的JWT拦截器/过滤器没放过OPTIONS请求，后端会直接拦截它，导致响应里没有Access-Control-Allow-Origin等CORS头，浏览器就会抛出拦截错误。

修改你的JWT拦截器代码，添加OPTIONS请求的放行逻辑：

public class JwtInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        // 放行OPTIONS预请求，不做JWT校验
        if (HttpMethod.OPTIONS.name().equalsIgnoreCase(request.getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
            return true;
        }
        // 后续正常的JWT校验逻辑
        String token = resolveToken(request);
        // ...
    }
}

2. 修正CORS配置（禁用*指定origin） #

当请求携带Authorization头时，浏览器不允许Access-Control-Allow-Origin设为*，必须指定具体的前端域名。建议用全局CORS配置替代控制器上的@CrossOrigin，避免遗漏接口：

@Configuration
public class GlobalCorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 指定前端地址，不要用*
                .allowedOrigins("http://localhost:4200")
                // 允许所有请求头
                .allowedHeaders("*")
                // 暴露需要前端读取的响应头
                .exposedHeaders("Authorization")
                // 允许所有HTTP方法（包含OPTIONS）
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                // 允许携带凭证（比如Authorization头）
                .allowCredentials(true);
    }
}

配置完成后可以移除控制器上的@CrossOrigin注解，避免配置冲突。

3. 完善后端resolveToken方法逻辑 #

确保你的resolveToken方法能处理请求头为空的情况（比如OPTIONS请求时），避免因token为空抛出异常导致响应缺失CORS头：

private String resolveToken(HttpServletRequest request) {
    String bearerToken = request.getHeader("Authorization");
    // 校验格式，避免空指针
    if (bearerToken != null && bearerToken.startsWith("Bearer ")) {
        return bearerToken.substring(7);
    }
    // 无token时返回null，不要抛出异常
    return null;
}

4. Angular端补充有效性校验 #

虽然你确认请求头不为空，但可以加一层token存在性判断，避免无效请求：

getSensors(){
  const token = localStorage.getItem("token");
  if (!token) {
    console.error("未获取到登录令牌");
    return;
  }
  const headers = new HttpHeaders({
    'Authorization': `Bearer ${token}`
  });
  this.http.get("http://localhost:8080/sensors", { headers })
    .subscribe(
      res => console.log(res),
      err => console.error("请求失败:", err)
    );
}

完成以上步骤后重启前后端，即可解决CORS错误和token解析异常问题。

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