Angular HttpClient：无法在 Http 请求中设置任何标头

Question

我刚刚开始学习 Angular（使用版本 19）。到目前为止，HttpClient 的工作进展顺利。我已经用我的后端（这是一个 Spring Boot 应用程序）尝试了各种请求，全部成功。

当我尝试将 JWT 令牌放入身份验证请求的标头中时，问题就出现了。无论我直接在请求调用中添加标头对象，还是通过拦截器添加标头，似乎标头都从未真正设置过。当我检查后端的过滤器时，它总是指出标头为空。

我只是按照标准方式实现了Http通信。

我的拦截器看起来像这样：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

    const token = localStorage.getItem("JWT_Token");
    if (token) {
      const authReq = request.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`
        }
      });
      return next.handle(authReq);
    }

    return next.handle(request);
  }
}

我的Http请求：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Book } from '../dto/book';

@Injectable({
  providedIn: 'root'
})
export class BookService {

  constructor(private http : HttpClient) { }

  private apiUrl = 'http://localhost:8080/book';

  getAllBooks() : Observable<Book[]> {
    return this.http.get<Book[]>(this.apiUrl + '/all'); 
  }

  getBookById(id : string) : Observable<Book> {
    return this.http.get<Book>(this.apiUrl + '?id=' + id); 
  }

}

[这是拦截器启动时的断点。看起来预期标头的内容已经存在于“lazyUpdate”中。然而，它并不生效。最后在后端，Spring 过滤器告知此传入请求的 header 为 null] (https://i.sstatic.net/KnZLZqpG.png)

Answer 1

当我这样做时，我只是使用 headers 而不是 setHeaders，也许这会给你带来一点运气，所以基本上是这样的：

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor() { }

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

    const token = localStorage.getItem("JWT_Token");
    if (token) {
      const authReq = request.clone({
        headers: request.headers.set('Authorization', `Bearer ${token}`)
      });
      return next.handle(authReq);
    }

    return next.handle(request);
  }
}

现在可能是一样的。 另外，如果您使用的是 Angular 19 中默认的独立组件。当您提供 http 时，请确保提供：

provideHttpClient(withInterceptorsFromDi())

否则注射不会发生。测试你的注射是否运行。只需将 console.log 放入拦截器中，看看它是否会触发，如果没有，您可能需要调整您的

provideHttpClient