Angular中设置Bearer JWT令牌请求接口仍报401错误如何解决

Angular 内置的 HttpHeaders 是不可变对象，所有调用 append()、set() 等修改请求头的方法，都不会在原实例上生效，只会返回更新后的新 HttpHeaders 实例。
你的代码中调用 headers.append()、headers.set() 后没有接收返回的新实例，最终传入请求的是初始创建的空headers对象，实际没有携带Authorization认证头，因此接口返回401未授权错误。
另外代码开头存在冗余笔误：方法外单独写的let token = localstorage.get('token');存在拼写错误（localstorage应为localStorage，get应为getItem），且方法内部已经重新获取token，这行代码可以直接删除。

直接链式调用set方法构造请求头，把最终生成的新实例传入请求即可，修正后的代码如下：

getCategories() : Observable<any> {
  const token = localStorage.getItem("token");

  const headers = new HttpHeaders()
    .set('Content-Type', 'application/json')
    .set('Authorization', `Bearer ${token}`);

  return this.http.get(this.CategoriesUrl, { headers });
}

• 调试请求类问题时，可以直接打开浏览器开发者工具的「网络」面板，查看对应请求的实际请求头载荷，能快速定位是头未携带、参数错误还是接口侧问题。你这个场景下Postman可以正常请求，说明token本身权限有效，问题只出在前端请求构造环节。
• 如果项目中大部分接口都需要携带token认证，推荐使用Angular的HTTP拦截器统一注入Authorization头，不需要在每个接口方法中重复构造headers，减少冗余代码和出错概率。

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