Angular 5中通过HttpInterceptor为POST请求添加请求头的问题

看起来你已经搭好了拦截器的基础框架，我来帮你完善细节，确保它能稳定工作且符合Angular 5的规范：

1. 优化拦截器代码（避免覆盖原有请求头） #

你当前的写法会直接替换掉请求的所有头信息，这可能导致其他必要的请求头丢失。正确的做法是在原有请求头的基础上追加或修改目标字段：

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

// 类名遵循大驼峰命名规范，符合TypeScript编码习惯
@Injectable()
export class HeaderInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 克隆请求并在原有头基础上设置新字段
    const modifiedReq = req.clone({
      setHeaders: {
        'Content-Type': 'application/json; charset=utf-8',
        // 如果需要添加认证头，也可以在这里补充
        // 'Authorization': 'Bearer ' + yourAuthToken
      }
    });

    // 传递修改后的请求继续处理
    return next.handle(modifiedReq);
  }
}

2. 在AppModule中正确注册拦截器 #

Angular 5需要通过HTTP_INTERCEPTORS令牌来注册拦截器，注意一定要开启multi: true（允许多个拦截器共存）：

import { NgModule } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HeaderInterceptor } from './your-interceptor-path/header.interceptor';

@NgModule({
  imports: [HttpClientModule], // 必须导入HttpClientModule才能启用拦截器
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HeaderInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

3. 可选：仅针对POST请求添加头 #

如果你只想给POST请求设置特定头，可以在拦截器里增加方法判断：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  let modifiedReq = req;
  // 仅对POST请求执行头修改
  if (req.method === 'POST') {
    modifiedReq = req.clone({
      setHeaders: {
        'Content-Type': 'application/json; charset=utf-8'
      }
    });
  }
  return next.handle(modifiedReq);
}

常见问题排查 #

• 确保你在组件/service中使用的是HttpClient而非旧版Http（Angular 5中Http已被弃用，只有HttpClient会触发拦截器）
• 如果原有请求已经存在Content-Type，setHeaders会直接替换它；若想保留原有值，改用append方法：

  headers: req.headers.append('Content-Type', 'application/json; charset=utf-8')
  

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