在Angular中,可以使用拦截器(interceptor)来解决HTTP请求头不包含自定义头的问题。下面是一个示例代码,演示如何在请求中添加自定义头。
首先,创建一个名为"header-interceptor.ts"的文件,编写以下代码:
import { Injectable } from '@angular/core';
import {
HttpInterceptor,
HttpHandler,
HttpRequest,
} from '@angular/common/http';
@Injectable()
export class HeaderInterceptor implements HttpInterceptor {
intercept(req: HttpRequest, next: HttpHandler) {
// 克隆请求对象,并添加自定义头
const modifiedReq = req.clone({
headers: req.headers.set('Custom-Header', 'custom-value'),
});
// 继续处理修改后的请求对象
return next.handle(modifiedReq);
}
}
接下来,在应用的主模块(通常是"app.module.ts")中注册该拦截器。找到providers
数组,并将HeaderInterceptor
添加为提供者。示例如下:
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 { HeaderInterceptor } from './header-interceptor';
@NgModule({
imports: [BrowserModule, HttpClientModule],
declarations: [AppComponent],
providers: [
// 注册拦截器
{ provide: HTTP_INTERCEPTORS, useClass: HeaderInterceptor, multi: true },
],
bootstrap: [AppComponent],
})
export class AppModule {}
现在,每次发送HTTP请求时,都会自动添加一个名为"Custom-Header"的自定义头。
请注意,如果您有多个拦截器,它们的顺序是有意义的。您可以使用multi
标志来确保拦截器按照注册的顺序依次执行。
通过使用拦截器,您可以在Angular中全局地添加自定义头,而无需在每个请求中手动添加它们。