Angular发送http get请求时如何在Authorization头部添加apikey

你需要在请求头中补充和Postman配置一致的Authorization字段，有两种实现方式：

单次请求配置（适合少量请求场景） #

首先从@angular/common/http导入HttpHeaders，再将配置好的请求头传入get方法的第二个参数即可：

import { HttpHeaders } from '@angular/common/http';

// 和Postman中Authorization输入框的内容完全一致即可，例如Bearer开头的密钥或者直接填apikey
const headers = new HttpHeaders({
  'Authorization': '你的完整apikey值'
});

this.http
  .get(url, { headers })
  .pipe()
  .subscribe((data: any) => {
    console.log(data);
  });

全局拦截器配置（适合多数请求都需要携带apikey的场景） #

可以通过Angular的Http拦截器统一为所有请求添加Authorization头，避免每个请求重复配置：

1. 执行CLI命令生成拦截器：
   ng generate interceptor interceptors/auth
2. 编辑生成的拦截器文件，添加头信息逻辑：

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

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 克隆原始请求并注入Authorization头
    const requestWithAuth = request.clone({
      headers: request.headers.set('Authorization', '你的完整apikey值')
    });
    return next.handle(requestWithAuth);
  }
}

3. 在AppModule的providers数组中注册拦截器，使其生效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthInterceptor } from './interceptors/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 { }

注意事项 #

• 不要在前端代码中硬编码敏感apikey提交到公开仓库，生产环境如果是面向用户的前端应用，建议通过后端服务转发接口请求，避免密钥暴露。

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