Angular 12 Http请求添加Authorization Header未生效问题排查

问题原因 #

• 1. this指向/取值时机错误导致token为空
     如果你是把httpOptions直接定义为类的属性，类初始化时this.user还未完成赋值，或者httpOptions的定义位置在普通函数、异步回调作用域下导致this指向不是预期的类实例，都会让this.user.token取值为undefined，Angular HttpClient会自动过滤值为null/undefined的请求头，最终不会携带Authorization字段。
• 2. HttpHeaders不可变特性导致取值失效
     Angular的HttpHeaders是不可变对象，实例化时就会固定所有请求头的值。如果你定义httpOptions时this.user.token还未完成赋值（比如用户信息是异步接口返回、或者登录态是后续才更新的），那实例化时token就是空值，后续你更新this.user也不会同步修改已经创建好的HttpHeaders实例。
• 3. 跨域CORS配置限制
     如果你的前端站点地址和后端接口地址http://localhost:8080的域名、端口、协议任意一项不一致，属于跨域请求，需要后端配置Access-Control-Allow-Headers响应头包含Authorization，否则浏览器会自动过滤掉不被允许的自定义请求头，不会随实际请求发送。

修复方案 #

方案1：请求前即时构造请求头（适合单个接口临时处理） #

确保在发起请求的同作用域下构造请求头，保证token取到最新值：

import {HttpClient, HttpHeaders} from "@angular/common/http";

// 发起请求前再构造httpOptions，避免提前初始化取值为空
const httpOptions = {
  headers: new HttpHeaders({
    'Authorization': `Bearer ${this.user.token}`
  })
};
return this.http.post(`http://localhost:8080/api/exchange/producers`, request, httpOptions);

方案2：使用HttpInterceptor全局添加鉴权头（推荐，适合项目全局统一处理） #

新增拦截器统一为所有符合条件的接口添加鉴权头，避免每个请求重复编写逻辑：

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor() {}
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 从本地存储/状态管理服务中取最新的token
    const token = localStorage.getItem('user_token');
    if (token) {
      // HttpRequest也是不可变对象，需要克隆后修改
      const authReq = request.clone({
        headers: request.headers.set('Authorization', `Bearer ${token}`)
      });
      return next.handle(authReq);
    }
    return next.handle(request);
  }
}

在AppModule中注册拦截器即可生效：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './auth.interceptor';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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