Angular 15：HttpInterceptor修改响应体不生效，变量已变更

首先要明确：浏览器开发者工具的网络面板显示的是服务器返回的原始响应，HttpInterceptor是在Angular应用内部修改响应体，不会改变网络请求的原始返回内容。如果你在组件代码中拿到的是修改后的body，说明拦截器已经生效，网络面板的原始响应属于正常现象。

如果你的应用代码中仍拿到原始body，按以下步骤排查：

• 确认拦截器注册正确
  在AppModule的providers数组中正确注册拦截器，必须设置multi: true：

  @NgModule({
    providers: [
      {
        provide: HTTP_INTERCEPTORS,
        useClass: YourResponseInterceptor, // 替换成你的拦截器类名
        multi: true
      }
    ]
  })
  export class AppModule { }
  

• 检查拦截器执行顺序
  若存在多个拦截器，providers数组的注册顺序决定执行顺序（先注册的先执行）。确保你的修改拦截器最后注册，避免被其他拦截器覆盖修改结果。

• 验证克隆响应的逻辑
  你的代码逻辑本身是正确的，可添加日志确认修改是否生效：

  return next.handle(req).pipe(
    map(event => {
      if (event instanceof HttpResponse) {
        const modifiedResp = event.clone({ body: null });
        console.log('拦截器修改后的body:', modifiedResp.body); // 应输出null
        return modifiedResp;
      }
      return event;
    })
  );
  

• 在组件中验证结果
  在请求订阅处打印响应，确认应用是否收到修改后的body：

  this.http.get('/你的接口地址').subscribe(resp => {
    console.log('组件收到的body:', resp.body); // 应输出null
  });
  

内容的提问来源于stack exchange，提问作者Andrés Quintanilla Sellers