本文深入探讨了angular应用在使用`httpinterceptor`添加`authorization`头时，后端却接收到`null`值的问题。核心原因在于`httprequest`对象的`headers`属性是只读的，直接使用`headers.append()`在克隆请求时无法正确生效。教程将详细介绍如何通过`clone`方法的`setheaders`属性来正确设置授权头，确保请求携带有效的认证信息。
在构建现代Web应用时，前后端通信的安全性至关重要。Angular的HttpInterceptor提供了一种优雅的方式来拦截和修改HTTP请求或响应，常用于添加认证令牌、日志记录或错误处理。然而，开发者在使用HttpInterceptor为请求添加Authorization头时，有时会遇到后端接收到的授权头为null的困惑，即使在拦截器内部日志显示令牌已正确附加。本文将深入分析这一问题，并提供一个标准且可靠的解决方案。
理解HttpInterceptor与HttpRequest的不可变性
Angular的HttpRequest对象是不可变的（immutable）。这意味着一旦创建，它的属性（包括headers）就不能被直接修改。当你调用req.clone()方法时，你实际上是创建了一个原始请求的副本，并可以在此基础上进行修改。
考虑以下常见的TokenInterceptor实现：
import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpHandler,
HttpEvent,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { SharedService } from './shared.service'; // 假设你的服务用于获取JWT
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(public sharedService: SharedService) {}
intercept(
req: HttpRequest,
next: HttpHandler
): Observable> {
const jwtToken = this.sharedService.getJwtToken();
if (jwtToken) {
// 潜在的问题代码：试图通过append修改headers
req = this.addTokenProblematic(req, jwtToken);
}
return next.handle(req);
}
// 原始的、可能导致问题的addToken方法
addTokenProblematic(req: HttpRequest, jwtToken: string): HttpRequest {
// 尽管这里使用了clone，但对headers属性的append操作并未按预期工作
// 因为headers对象本身在clone时也需要被完全替换才能生效
return req.clone({
headers: req.headers.append('Authorization', 'Bearer ' + jwtToken),
});
}
} 在这种情况下，尽管console.log()可能在addTokenProblematic方法内部显示正确的Authorization头，但当请求实际发送到后端时，Authorization头却为空。这是因为req.headers.append()返回的是一个新的HttpHeaders实例，但将其赋值给clone方法的headers属性时，由于其内部处理机制，可能没有正确地替换掉原始的HttpHeaders实例，或者更直接地说，这种方式不符合HttpRequest.clone方法设计来修改headers的最佳实践。
正确设置授权头：使用setHeaders
解决这个问题的关键在于理解HttpRequest.clone()方法的设计意图。当需要修改请求头时，应该使用clone方法的配置对象中的setHeaders属性，而不是尝试在headers属性上调用append。setHeaders属性允许你直接提供一个对象，其中包含要设置或覆盖的请求头。
以下是修正后的addToken方法：
import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpRequest,
HttpHandler,
HttpEvent,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { SharedService } from './shared.service'; // 假设你的服务用于获取JWT
@Injectable()
export class TokenInterceptor implements HttpInterceptor {
constructor(public sharedService: SharedService) {}
intercept(
req: HttpRequest,
next: HttpHandler
): Observable> {
const jwtToken = this.sharedService.getJwtToken();
if (jwtToken) {
// 使用正确的addToken方法
req = this.addToken(req, jwtToken);
}
return next.handle(req);
}
/**
* 正确的addToken方法：使用setHeaders来设置或覆盖Authorization头
* @param req 原始HttpRequest对象
* @param jwtToken JWT令牌
* @returns 带有Authorization头的新HttpRequest对象
*/
addToken(req: HttpRequest, jwtToken: string): HttpRequest {
return req.clone({
setHeaders: {
Authorization: 'Bearer ' + jwtToken,
},
});
}
} 通过使用setHeaders，Angular的HTTP客户端会确保在创建新的克隆请求时，Authorization头被正确地设置或更新。这解决了因HttpRequest和HttpHeaders的不可变性导致的头信息传递失败的问题。
注册Interceptor
为了让TokenInterceptor生效，你需要在Angular模块（通常是AppModule）中将其注册为HTTP拦截器：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { TokenInterceptor } from './token.interceptor';
import { SharedService } from './shared.service'; // 引入你的共享服务
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpClientModule],
providers: [
SharedService, // 提供你的共享服务
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true, // 必须设置为true，允许多个拦截器
},
],
bootstrap: [AppComponent],
})
export class AppModule {}注意事项与总结
- Immutability是关键： 记住HttpRequest和HttpHeaders是不可变的。任何修改请求头的操作都应该通过req.clone()方法，并利用其提供的setHeaders或setParams等属性来完成。
- CORS配置： 虽然本文的问题根源在于客户端，但确保后端正确配置CORS（跨域资源共享）仍然至关重要。如果CORS配置不当，即使客户端发送了正确的授权头，请求也可能被浏览器拦截。示例中提供的Spring Boot CORS配置是正确的，它允许所有来源、方法和头，并暴露了Authorization头。
- console.log()的误导性： 在拦截器内部使用console.log(req.headers)时，可能会看到修改后的头信息。这是因为req.headers.append()确实返回了一个新的HttpHeaders实例，但这个实例可能没有被正确地集成到clone方法返回的最终请求对象中。使用setHeaders可以避免这种潜在的混淆。
-
setHeaders vs headers.append()：
- setHeaders: 用于在克隆请求时，一次性设置或覆盖一个或多个头。如果指定的头已存在，其值将被新值替换。
- headers.append(): 这是一个HttpHeaders对象上的方法，用于创建一个新的HttpHeaders实例，其中包含原始头和新添加的头。在clone方法中直接使用它作为headers属性的值时，可能不会按预期工作，因为它期望一个包含键值对的对象，或者一个全新的HttpHeaders实例。setHeaders是更推荐和明确的方式。
通过遵循这些最佳实践，您可以确保Angular应用中的HttpInterceptor能够可靠地为所有出站请求附加正确的Authorization头，从而保障前后端通信的安全性。
