Angular HTTP拦截器未触发或无法修改请求问题求助

问题描述 #

我在Angular应用中实现了一个HTTP拦截器，用于为出站HTTP请求添加Authorization请求头，但该拦截器未触发——请求头未被添加，且拦截器内的控制台日志也未在浏览器控制台显示。以下是我的配置代码：

app.config.ts #

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideClientHydration } from '@angular/platform-browser';
import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { provideHttpClient } from '@angular/common/http';
import { AuthInterceptor } from './Services/auth.interceptor';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
providers:[
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideClientHydration(),
provideAnimationsAsync(),
provideHttpClient(),
{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}]
};

auth.interceptor.ts #

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor
{
constructor(private loginservice:LoginserviceService)
{

    }
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let newreq=req;
        let token=this.loginservice.getToken();
    
        console.log("interceptor:"+token);
    
        if(token!=null)
        {
            newreq=newreq.clone({setHeaders:{Authorization:`Bearer ${token}`}})
        }
        return next.handle(newreq);
    }

}

解决方法 #

1. 修正provideHttpClient配置（核心问题） #

Angular 14及以上版本中，使用provideHttpClient()时，传统的HTTP_INTERCEPTORS提供商不会自动生效，必须显式启用依赖注入拦截器支持。修改app.config.ts：

// 先导入withInterceptorsFromDi
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

// 然后更新provideHttpClient的调用
provideHttpClient(withInterceptorsFromDi()),

修改后的完整providers数组：

providers:[
  provideZoneChangeDetection({ eventCoalescing: true }),
  provideRouter(routes),
  provideClientHydration(),
  provideAnimationsAsync(),
  provideHttpClient(withInterceptorsFromDi()),
  {
    provide: HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi: true
  }
]

2. 验证HttpClient的使用 #

确保组件/服务中注入的是HttpClient（来自@angular/common/http），而非已废弃的Http类。只有HttpClient发起的请求才会被拦截器处理。

3. 检查LoginService的注册状态 #

确认LoginserviceService已正确注册，比如添加@Injectable({ providedIn: 'root' })装饰器。若服务未注册，拦截器的构造函数注入会失败，导致拦截器无法初始化。

4. 排查请求是否被跳过 #

检查发起请求时是否使用了自定义跳过拦截器的配置，例如：

this.http.get('/api/data', { headers: { skipInterceptor: 'true' } });

若有此类配置，需移除或调整拦截器逻辑适配该场景。

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