Angular中HttpInterceptor与HttpClientModule引发无限请求问题排查

一、无限请求的根源 #

• 同时引入HttpClientModule和provideHttpClient()会让Angular生成两个完全独立的HttpClient实例：一个来自传统模块，一个来自独立API的提供者。两个实例的拦截器上下文不共享，一旦拦截逻辑触发了跨实例的请求，就会形成循环触发，最终导致无限请求。
• 另一种常见情况是拦截器内部发起了请求（比如刷新Token），但没有排除该请求的拦截规则，导致拦截器不断拦截自己发起的请求，陷入死循环。

二、Authorization头未设置的原因 #

• 拦截器绑定实例不匹配：当存在两个HttpClient实例时，你的拦截器可能只注册到了其中一个，但业务代码实际使用的是另一个实例，导致拦截逻辑根本没执行到请求上。
• Token的存储/读取逻辑异常：比如服务器返回Token后没有正确存入localStorage/sessionStorage，或者读取Token时存在异步时序问题（比如请求发起时Token还未完成存储）。
• 拦截器逻辑错误：比如修改请求头时没有返回克隆后的请求对象（Angular请求对象是不可变的），或者判断Token存在的条件有误（比如未处理空字符串、undefined的情况）。

三、解决方案 #

1. 清理重复的HttpClient配置
   彻底移除importProvidersFrom(HttpClientModule)，只保留独立API的配置，确保全局只有一个HttpClient实例：

   bootstrapApplication(AppComponent, {
     providers: [
       provideHttpClient(withInterceptors([你的拦截器函数])),
       // 其他业务提供者
     ]
   });
   

2. 修正拦截器的注册方式
   确保拦截器通过withInterceptors方法绑定到provideHttpClient，这是Angular独立组件模式下的标准拦截器注册方式。
3. 避免拦截器自触发
   如果拦截器内部需要发起请求，必须添加排除规则，跳过对该请求的拦截：

   export const authInterceptor: HttpInterceptorFn = (req, next) => {
     // 跳过Token获取接口的拦截
     if (req.url.endsWith('/auth/token')) {
       return next(req);
     }
   
     const token = localStorage.getItem('userToken');
     if (token) {
       // 克隆请求并添加Authorization头
       const authReq = req.clone({
         headers: req.headers.set('Authorization', `Bearer ${token}`)
       });
       return next(authReq);
     }
     return next(req);
   };
   

4. 验证Token的流转逻辑
   在获取Token的接口回调中，确认已将Token正确存入存储介质，并且在发起业务请求时，Token已完成存储（可通过console.log在拦截器中打印Token值验证）。

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