如何在Angular5中为HTTP请求添加自定义请求头？

算力阿峰

2026-5-29

在Angular 5中为HTTP请求添加自定义请求头

嘿，你用的是Angular 2时代的Headers类，但在Angular 5里，官方已经推荐使用新的HttpClient模块（从Angular 4.3开始引入），旧的angular2/http模块已经被废弃啦。下面是适配Angular 5的正确实现方式：

步骤1：导入正确的模块

首先确保你导入的是@angular/common/http下的HttpClient和HttpHeaders，而不是旧的Http和Headers：

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

步骤2：创建自定义请求头

注意HttpHeaders是不可变对象，所以每次调用append()方法后需要重新赋值：

// 创建HttpHeaders实例并链式添加自定义头
const headers = new HttpHeaders()
  .append('headerName', 'value')
  .append('Another-Custom-Header', 'another-value');

或者也可以直接在构造函数里初始化多个头：

const headers = new HttpHeaders({
  'headerName': 'value',
  'Another-Custom-Header': 'another-value'
});

步骤3：发起带自定义头的POST请求

把headers放到请求选项里，传给HttpClient.post()方法：

// 先在组件/service的构造函数中注入HttpClient
constructor(private http: HttpClient) { }

// 发起POST请求并处理响应
this.http.post(url, data, { headers: headers })
  .subscribe(
    response => {
      // 处理成功响应
      console.log('请求成功:', response);
    },
    error => {
      // 处理错误情况
      console.error('请求失败:', error);
    }
  );