Angular 14服务中如何为每个HTTP请求正确传递请求头？

问题场景 #

我在Angular 14中创建了HolidayCalendarService服务，为了复用请求头，把headers声明为服务的私有属性，但在HTTP请求方法中引用this.headers时触发编译错误：

import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class HolidayCalendarService {
    ...
  private readonly headers: HttpHeaders;

  constructor(private httpClient: HttpClient,
    private configService: ConfigService,
    ...
  ) {    
    this.headers = new HttpHeaders({ 'appId': this.configService.config.appId});
  }

  add(obj: MyObject){
    return this.httpClient.post<MyResponse>(this.httpService.add(), myObj, {
        this.headers }).pipe(map((res: any) => res.data));
  }
}

编译错误信息：

No overload matches this call.
  Overload 1 of 15, '(url: string, body: any, options: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpContext | undefined; params?: HttpParams | ... 1 more ... | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }): Observable<...>', gave the following error.
    Argument of type '{ this: any; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: "events"; context?: HttpContext | undefined; params?: HttpParams | { ...; } | undefined; reportProgress?: boolean | undefined; responseType?: "json" | undefined; withCredentials?: boolean | undefined; }'.

而将请求头在方法内临时声明时，代码可以正常编译：

add(obj: MyObject){
  const headers = new HttpHeaders({ 'appId': this.configService.config.appId});
  return this.httpClient.post<MyResponse>(this.httpService.add(), myObj, {
      headers }).pipe(map((res: any) => res.data));
}

错误原因 #

核心问题是对象字面量的语法错误：
你在post方法的options参数中写了{ this.headers }，这是无效的JS/TS语法。对象字面量的简写形式{ headers }仅当变量名和对象键名完全一致时才生效（比如你方法内的const headers = ...，可以用{ headers }简写）。但这里你的变量是this.headers，不是headers，必须明确写出键值对{ headers: this.headers }。

正确解决方案 #

方案1：修正对象字面量写法 #

直接把options参数里的{ this.headers }改成{ headers: this.headers }，修正后的add方法：

add(obj: MyObject){
  return this.httpClient.post<MyResponse>(this.httpService.add(), myObj, {
      headers: this.headers }).pipe(map((res: any) => res.data));
}

这样就能复用服务类中预先声明的headers属性，无需每次创建新的HttpHeaders实例。

方案2：使用HttpInterceptor全局统一添加请求头 #

如果你的多个服务、多个HTTP请求都需要携带appId这类固定请求头，更优雅的方式是使用Angular的HttpInterceptor，避免在每个请求中手动传递headers：

1. 创建拦截器类：

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

@Injectable()
export class AppIdInterceptor implements HttpInterceptor {

  constructor(private configService: ConfigService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 克隆请求并添加appId头
    const modifiedReq = request.clone({
      headers: request.headers.set('appId', this.configService.config.appId)
    });
    return next.handle(modifiedReq);
  }
}

2. 在app.module.ts中注册拦截器：

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppIdInterceptor } from './app-id.interceptor';

@NgModule({
  ...
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AppIdInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

这样所有HTTP请求都会自动携带appId请求头，无需在服务类中手动处理headers，代码更简洁可维护。

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