本文深入探讨了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<HttpEvent> { 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属性允许你直接提供一个对象，其中包含要设置或覆盖的请求头。
抖云猫AI论文助手
一款AI论文写作工具，最快 2 分钟，生成 3.5 万字论文。论文可插入表格、代码、公式、图表，依托自研学术抖云猫大模型，生成论文具备严谨的学术专业性。
146 查看详情
以下是修正后的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<HttpEvent> { 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头，从而保障前后端通信的安全性。
以上就是Angular HttpInterceptor中授权头为空的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/714250.html
微信扫一扫 
支付宝扫一扫 
