Angular发起HTTP请求时Authorization头丢失问题求助

问题原因 #

你的错误核心是HttpClient.post方法的传参顺序不符合Angular的API规范：
Angular HttpClient的post方法参数顺序为：

1. 第一个参数：请求URL
2. 第二个参数：请求体（要传给后端的body数据）
3. 第三个参数：可选配置项（包含headers、响应类型等配置）

你现在把包含headers的配置对象放到了第二个参数的位置，也就是作为请求体发送给后端，根本没有被识别为请求头配置，所以请求自然不会携带Authorization头。

修复方案 #

如果这个接口不需要额外传递请求体，把第二个参数设为null，将headers配置放到第三个参数位即可：

getTypes(token:any):Observable<any>{
  let headers = new HttpHeaders().set('Content-Type', 'application/json')
                                 .set('Authorization', token);
  console.log(headers)
  // 修正参数顺序：第二个参数是请求体，传null，第三个参数放配置
  return this._http.post(this.url + 'productType/getall', null, {headers:headers});
}

其他可选排查点 #

如果修改参数后还有问题，可以按以下顺序排查：

• 确认你的token格式是否符合后端要求，通常Authorization头需要带Bearer 前缀，示例写法：

  .set('Authorization', `Bearer ${token}`)
  

• 检查后端CORS配置，确保Access-Control-Allow-Headers响应头中包含Authorization，否则预检OPTIONS请求被拦截后，正式请求不会携带自定义头
• 打开浏览器开发者工具的「网络」面板，找到实际发出的请求，直接查看请求头是否携带Authorization，排除后端解析请求头异常的问题

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