Angular中使用HttpClient添加API请求头不显示问题排查

核心问题：请求参数格式错误 #

你直接将HttpHeaders实例传给了HttpClient.get方法的第二个参数，但Angular的get方法要求第二个参数是配置对象，而非单独的headers实例。

修正代码 #

把headers放到配置对象的headers属性中，修改后的getInitialData方法如下：

getInitialData(q: string) {
  return this.httpClient.get<InitialResponse>(`${this.serverUrl}/getInitialData?` + query, { headers: this.headers }).toPromise();
}

其他排查要点 #

• 确认类成员变量声明：确保你已经在类中声明了headers变量，比如：

  private headers: HttpHeaders;
  

  构造函数中HttpHeaders的初始化逻辑是对的（因为HttpHeaders是不可变对象，set方法返回新实例，赋值给this.headers没问题）。
• 检查HTTP拦截器：如果项目中使用了HttpInterceptor，需确认拦截器是否修改或移除了自定义请求头。
• 跨域请求场景：如果是跨域请求，自定义请求头会触发OPTIONS预检请求，需要服务器在响应头Access-Control-Allow-Headers中包含test，否则浏览器会自动移除该请求头。

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