Angular 12中Http Interceptor未触发 求代码修正方案

核心问题修正 #

你的代码存在一个大小写拼写错误，这是拦截器不生效的直接原因：

• 在app.module.ts中，元数据属性被写成了大写的Providers，但Angular框架仅识别小写的providers，这个错误会导致拦截器无法被注册到依赖注入系统中。

修正后的app.module.ts相关代码：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { ApiInterceptor } from './api.interceptor'; // 确保导入路径正确

@NgModule({
  imports: [HttpClientModule],
  providers: [ 
    {
      provide: HTTP_INTERCEPTORS, 
      useClass: ApiInterceptor, 
      multi: true
    }
  ]
})
export class AppModule { }

额外检查点 #

如果修正后拦截器仍未触发，可排查以下内容：

• 确认ApiInterceptor的文件导入路径正确，无拼写错误
• 检查ApiService中确实使用HttpClient发起请求（当前代码已符合要求，需避免误用旧的Http服务）
• 通过浏览器控制台的Network标签，确认请求是否真的发送出去（排除跨域拦截等外部因素）
• 确认没有其他拦截器覆盖或阻断了当前拦截器的执行（已设置multi: true，该情况概率较低）

验证方式 #

修正代码后重启项目，调用ApiService的loadConfig方法，查看浏览器控制台是否输出reached，若输出则说明拦截器已正常工作。

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