Angular拦截器设置Token仍报No token provided问题求助

一、确认Angular拦截器是否正确注册 #

Angular的HttpInterceptor必须在模块的providers中配置才能生效，这是最容易遗漏的环节：

// 在AppModule或核心模块中添加如下配置
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor'; // 替换为你的拦截器实际路径

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 允许多个拦截器并存
    }
  ]
})
export class AppModule { }

二、验证请求是否真的携带了Authorization头 #

打开浏览器开发者工具→Network标签，找到调用/user的请求，查看Request Headers：

• 如果没有Authorization: Bearer xxx：说明拦截器未执行或未正确设置请求头。在拦截器中添加日志确认Token获取与头设置情况：

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const accessToken = this.cookieService.get('accessToken');
    console.log('拦截器获取到的Token:', accessToken); // 确认Token是否有效
    if (accessToken) {
      req = req.clone({
        setHeaders: {
          Authorization: `Bearer ${accessToken}`
        }
      });
      console.log('已设置的Authorization头:', req.headers.get('Authorization')); // 确认头已添加
    } else {
      console.error('Access token not found in cookie');
    }
    return next.handle(req);
  }
  

• 如果存在Authorization头：问题出在后端，继续以下排查步骤。

三、后端CORS配置检查 #

若前端与后端跨域，必须确保后端允许携带自定义头和凭证：

// Express框架的CORS配置示例
const cors = require('cors');
app.use(cors({
  origin: 'http://你的前端域名:端口', // 禁止使用*，必须指定具体域名
  credentials: true, // 允许携带Cookie等凭证
  allowedHeaders: ['Authorization', 'Content-Type'] // 明确授权Authorization头
}));

四、后端Token验证逻辑排查 #

检查verifyToken中间件：

1. 确认console.log('AuthHeader', authorizationHeader);是否输出内容，如果没有，说明请求头未传到后端，大概率是CORS配置问题。
2. 若存在代理服务器，可尝试用req.headers['authorization']（全小写）替代req.headers.authorization，避免大小写兼容问题。

五、Cookie相关配置检查 #

登录接口设置Cookie时，需适配跨域场景：

res.cookie('accessToken', accessToken, {
  maxAge: 30000,
  path: '/', // 确保全站可访问该Cookie
  sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax', // 生产环境HTTPS下需设为None
  secure: process.env.NODE_ENV === 'production', // 生产环境开启secure属性
  httpOnly: false // 前端需通过CookieService读取，不能设为true
});

同时在Angular拦截器中开启请求凭证携带：

req = req.clone({
  setHeaders: {
    Authorization: `Bearer ${accessToken}`
  },
  withCredentials: true
});

内容的提问来源于stack exchange，提问作者Артем