Angular中HttpClient.post报Can't assign type Headers错误如何解决

报错根因 #

代码中实例化的是浏览器原生的Headers类，而Angular HttpClient请求配置的headers字段仅支持三类合法值：

• @angular/common/http提供的HttpHeaders类实例
• 键类型为字符串、值类型为字符串或字符串数组的普通对象
• undefined
  原生Headers类缺少TS要求的字符串索引签名，无法通过类型校验，因此触发编译报错。代码文件头部已经导入了HttpHeaders，但实际逻辑中未使用该类。

修复方案 #

• 将请求头实例化逻辑从new Headers()替换为new HttpHeaders()，使用Angular内置的请求头类
• 注意HttpHeaders是不可变对象，调用append、set等方法不会原地修改原实例，会返回携带新配置的HttpHeaders实例，需要接收方法返回值才能拿到设置完成的请求头对象
• 可选优化：Angular HttpClient发送JSON格式POST请求时，默认会自动添加Content-Type: application/json请求头，无特殊自定义需求可以省略手动设置该头的逻辑

修复后完整代码 #

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

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  constructor(
    private http: HttpClient 
  ) { }

  registerUser(user: any) {
    // 接收append返回的新HttpHeaders实例
    const headers = new HttpHeaders().append('Content-Type', 'application/json');
    return this.http.post('http://localhost:3000/account/reg', user, { headers });
  }
}

额外提示：原代码中方法名regidterUser存在拼写错误，建议修正为registerUser，避免后续调用时出现方法不存在的问题。

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