Angular 8 如何为HTTP请求添加自定义请求头（如X-Auth-Token、x-client-key）

此前尝试未生效的核心原因 #

• 链式构造请求头存在逻辑bug：Headers 实例的 set() 方法执行后无返回值（返回undefined），new Headers().set(xxx).set(xxx) 执行完成后，赋值给headers的变量实际为undefined，并非有效的请求头对象，传入请求配置后自然无法生效
• 传值与接口要求不匹配：接口规定的 x-client-key 取值为严格字符串FRONTEND，两次尝试均传入带末尾空格的FRONTEND_CLIENT_KEY ，和接口校验规则完全不匹配，即便请求头成功携带也会被安全校验拦截
• 框架适配问题：若项目使用Angular 4.3及以上版本内置的HttpClient模块，原生浏览器的Headers实例无法被框架正确解析序列化，需要使用框架封装的HttpHeaders类构造请求头，才能确保自定义头被正确携带到请求中

可直接生效的实现代码 #

首先在服务/组件文件顶部导入框架提供的HttpHeaders依赖：

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

改造原有getMagic方法：

getMagic(data) {
  // HttpHeaders的set方法会返回新的实例，支持安全的链式调用
  const headers = new HttpHeaders()
    .set('Content-Type', 'application/json')
    .set('x-client-key', 'FRONTEND');

  return new Promise((resolve, reject) => {
    this.http
      .post(
        environment.serverUrl + this.getApiEndPoint() + 'get-magic',
        data,
        { headers: headers }
      )
      .subscribe(
        (response: any) => resolve(response),
        (err) => {
          console.log(err);
          reject(err);
        }
      );
  });
}

简化写法参考 #

无需手动构造HttpHeaders实例时，可以直接在post请求的第三参数中用对象字面量声明自定义头，写法更简洁：

this.http.post(请求url, data, {
  headers: {
    'Content-Type': 'application/json',
    'x-client-key': 'FRONTEND'
  }
})

注意：请求头的取值不要附带前后多余的空格，避免触发接口的精确匹配校验规则导致请求被拦截

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