如何在Angular服务中启用HttpInterceptor配置HTTP请求头

1. 生成拦截器文件 #

执行 Angular CLI 命令快速生成拦截器基础代码：
ng generate interceptor interceptors/api-key
执行后会在项目interceptors目录下生成api-key.interceptor.ts文件。

2. 编写拦截器逻辑 #

编辑生成的拦截器文件，实现往请求头追加API密钥的逻辑：

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

@Injectable()
export class ApiKeyInterceptor implements HttpInterceptor {
  // API密钥建议存放在environment环境配置文件中，生产环境通过构建流程注入，不要硬编码在业务代码里
  private readonly API_KEY = '和后端约定的API密钥值';
  // 请求头字段名需要和后端SpringBoot拦截器中读取的字段完全一致，通常约定为X-API-KEY
  private readonly API_HEADER_KEY = 'X-API-KEY';

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // HttpRequest为不可变对象，需要克隆后修改
    const reqWithApiKey = request.clone({
      headers: request.headers.set(this.API_HEADER_KEY, this.API_KEY)
    });
    return next.handle(reqWithApiKey);
  }
}

3. 注册拦截器到应用 #

在根模块（通常是app.module.ts）中注册拦截器，使其对全局HTTP请求生效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 必须导入HttpClientModule，HTTP相关功能才会生效
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { ApiKeyInterceptor } from './interceptors/api-key.interceptor';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiKeyInterceptor,
      multi: true // 支持同时注册多个拦截器
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

注意事项 #

• 如果有部分请求不需要附加API密钥，可以在拦截器的intercept方法中添加路径判断逻辑，过滤不需要处理的请求
• 确保后端application.properties中存储的API密钥和前端使用的密钥值一致，避免鉴权失败
• 不要将API密钥硬编码提交到代码仓库，生产环境建议通过CI/CD构建注入环境变量，或者应用启动时调用无鉴权接口获取短期有效密钥

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