SpringBoot后端可接收Fetch的JWT，却无法接收Angular HttpClient的JWT

核心矛盾点 #

Fetch请求能让后端正常获取JWT凭证，但Angular HttpClient请求无法做到，且已配置withCredentials: true、CORS和安全配置看似无误，JWT的httpOnly Cookie在浏览器中可见。

优先排查步骤 #

1. 对比两种请求的实际请求头 #

打开浏览器DevTools的Network面板，分别发送两类请求，重点检查：

• Fetch请求是否携带Authorization: Bearer <token>头，而HttpClient请求未携带
• 两者的Cookie字段是否都包含目标JWT的httpOnly Cookie

针对性解决方案 #

方案1：添加HttpInterceptor自动注入Authorization头 #

如果JWT存储在前端（如localStorage），需通过拦截器自动为HttpClient请求添加认证头：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('authToken'); // 替换为你的实际存储键名
    if (token) {
      const authReq = req.clone({
        headers: req.headers.set('Authorization', `Bearer ${token}`)
      });
      return next.handle(authReq);
    }
    return next.handle(req);
  }
}

在app.config.ts中注册拦截器：

provideHttpClient(withFetch(), withInterceptors([AuthInterceptor]))

方案2：修正Firebase过滤器从Cookie读取JWT #

如果JWT是通过httpOnly Cookie传递的，当前过滤器从Authorization头读取的逻辑错误，需改为从Cookie提取：

@Component
public class FirebaseAuthFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain chain)
            throws ServletException, IOException {
        String token = null;
        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if ("jwt-token".equals(cookie.getName())) { // 替换为你的Cookie名称
                    token = cookie.getValue();
                    break;
                }
            }
        }

        if (token != null) {
            try {
                FirebaseToken decodedToken = FirebaseAuth.getInstance().verifyIdToken(token);
                UserDetails userDetails = new User(decodedToken.getUid(), "", Collections.emptyList());

                SecurityContextHolder.getContext().setAuthentication(
                        new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities()));
            } catch (Exception e) {
                response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
                return;
            }
        }
        chain.doFilter(request, response);
    }
}

方案3：全局配置HttpClient的withCredentials #

避免单个请求配置的冲突，在app.config.ts中全局启用：

provideHttpClient(withFetch(), withOptions({
  withCredentials: true
}))

方案4：优化CORS配置细节 #

补充预检请求缓存时长，避免重复触发：

configuration.setMaxAge(3600L);

如果使用具体域名而非通配符，可将setAllowedOriginPatterns替换为：

configuration.setAllowedOrigins(List.of("http://localhost:4200"));

方案5：验证Cookie的SameSite与Path配置 #

• 若使用SameSite=None，生产环境必须配合HTTPS（localhost例外）
• 确保Cookie的Path设置为/，保证所有接口请求都能携带该Cookie

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