Angular 5 POST请求无法携带Authorization Token问题求助

我来帮你排查这两个方案的问题，顺便给出适配Angular5的正确实现方式：

方案1：HttpInterceptor拦截器的问题分析与修复 #

你提到控制台能打印intercepted，但请求头里没有Token，大概率是这几个原因：

1. 拦截器注册时未设置multi: true #

这是最容易忽略的点！如果在app.module.ts里注册拦截器时没加multi: true，你的拦截器会覆盖默认的HTTP拦截器，导致配置不生效。正确的注册方式应该是：

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [/* 你的模块 */],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true // 必须设置为true，允许多个拦截器共存
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 预检请求（OPTIONS）干扰判断 #

浏览器会对跨域请求先发OPTIONS预检请求，这时候拦截器也会触发，但OPTIONS请求不会携带Authorization头（这是浏览器的默认行为）。你可以修改拦截器，只对实际的业务请求（比如POST、GET）添加Token：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log('intercepting request:', req.url);
    const authToken = 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImhhbXphQHNwc25ldC5jb20iLCJ1c2VySWQiOjk5MjI2MDYsImlhdCI6MTUyNjQ2Mzc2NywiZXhwIjoxNTI2NjM2NTY3fQ.v9RjU25kt-neRFHl8P3q5k4VokpJdNm1Kgn7BU10Zoc';

    // 跳过OPTIONS预检请求，只对业务请求添加Token
    if (req.method !== 'OPTIONS') {
      const authReq = req.clone({
        setHeaders: {
          Authorization: authToken
        }
      });
      console.log('modified request headers:', authReq.headers.get('Authorization')); // 这里可以确认Token是否被正确设置
      return next.handle(authReq);
    }

    return next.handle(req);
  }
}

3. 检查实际发送的请求 #

不要只看控制台日志，打开浏览器的Network面板，找到实际的POST请求（不是OPTIONS），查看Request Headers里是否有Authorization字段——有时候日志显示拦截器触发了，但可能后续有其他逻辑修改了请求。

方案2：直接设置请求头的Angular5兼容修复 #

Angular5已经废弃了Headers和RequestOptions这些旧API，改用HttpHeaders，所以你的代码会报错。适配Angular5的写法如下：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map, catchError } from 'rxjs/operators'; // Angular5需要从rxjs/operators导入操作符

@Injectable()
export class YourService {
  constructor(private http: HttpClient) { }

  post(url: string, data: any): Observable<any> {
    const authToken = 'JWT eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImhhbXphQHNwc25ldC5jb20iLCJ1c2VySWQiOjk5MjI2MDYsImlhdCI6MTUyNjQ2Mzc2NywiZXhwIjoxNTI2NjM2NTY3fQ.v9RjU25kt-neRFHl8P3q5k4VokpJdNm1Kgn7BU10Zoc';
    
    // 使用HttpHeaders构建请求头
    const headers = new HttpHeaders()
      .set('Content-Type', 'application/json')
      .set('Authorization', authToken);

    // 把headers作为第三个参数传入post方法
    return this.http.post(url, data, { headers })
      .pipe(
        map(res => res),
        catchError(this.handleError.bind(this)) // 注意绑定this上下文
      );
  }

  private handleError(error: any): Observable<never> {
    // 适配RxJS5+的错误处理方式
    console.error('An error occurred', error);
    return Observable.throw(error.message || error);
  }
}

总结建议 #

优先使用方案1的拦截器，因为它能统一处理所有HTTP请求，不用在每个请求方法里重复写Token逻辑，后期维护更方便。

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