Angular 9自定义HttpInterceptor未给请求添加自定义参数问题排查

你没有将自定义的CountryInterceptorService注册到Angular的HTTP拦截器执行链中，Angular默认不会自动识别实现了HttpInterceptor接口的服务，必须手动注册才会生效。

1. 给CountryInterceptorService添加@Injectable()装饰器，保证依赖注入可以正常识别该服务，修改后代码如下：

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

@Injectable()
export class CountryInterceptorService implements HttpInterceptor {
    intercept(
        req: HttpRequest<any>,
        next: HttpHandler
    ): Observable<HttpEvent<any>> {
        const cloneReq = req.clone({
            params: req.params.set(
                "country",
                "France"
            ),
        })
        return next.handle(cloneReq)
    }
}

2. 在app.module.ts中先从@angular/common/http导入HTTP_INTERCEPTORS常量，再在providers数组中添加拦截器注册配置，修改后的providers片段如下：

providers: [
    CookieService,
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        coreLibraryLoader: () => import('highlight.js/lib/core'),
        languages: {
          xml: () => import('highlight.js/lib/languages/xml'),
          typescript: () => import('highlight.js/lib/languages/typescript'),
          scss: () => import('highlight.js/lib/languages/scss'),
          json: () => import('highlight.js/lib/languages/json')
        },
      },
    },
    IpInterceptorService,
    {
      provide : APP_INITIALIZER,
      useFactory : getIpService,
      deps: [IpInterceptorService, HttpClient],
      multi : true
    },
    // 新增拦截器注册配置
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CountryInterceptorService,
      multi: true
    }
],

• 你当前的实现是将country参数添加到请求的*查询参数（Query Params）*中，会拼接在请求URL末尾，不会出现在POST/PUT等请求的请求体（Body）中，校验请求时注意区分位置。
• 如果项目中存在多个HTTP拦截器，执行顺序和providers数组中注册的顺序一致，若其他拦截器也对params做了覆盖操作，可能导致当前拦截器的修改失效，可以调整注册顺序排查。
• 如果后端接口要求参数放在请求头或者请求体中，可以修改拦截器的clone逻辑，比如添加到请求头的写法为headers: req.headers.set('country', 'France')。

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