Angular HTTP拦截器未触发：无法添加Authorization请求头求助

核心原因 #

你使用原生fetch API发送请求，而Angular的HTTP拦截器仅对通过Angular自带的HttpClient发起的请求生效，对原生fetch、XMLHttpRequest这类直接调用浏览器API的请求完全不拦截，这就是拦截器未触发的根本原因。

额外说明 #

你的拦截器实现了OnInit钩子，但Angular服务（包括拦截器服务）不会触发ngOnInit，所以console.log('Working? ')永远不会执行，这点不影响拦截功能，可以忽略。

解决方案 #

将请求方式替换为Angular的HttpClient：

1. 在组件/服务中注入HttpClient：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

2. 替换原fetch请求为HttpClient的post方法：

// 替换原fetch代码为以下内容
const loggedIn = await this.http.post('http://localhost:3000/api/user/login', user).toPromise();

若使用RxJS Observable风格，直接订阅即可，无需转换为Promise。

修改后，请求会经过你配置的TokenInterceptor，拦截器就能正常添加Authorization请求头了。

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