Angular 4请求头设置异常？还是Express.js未正确读取？

我来帮你搞定这个问题！Postman能正常工作但Angular请求失败，大概率是Authorization头的格式不符合后端预期——很多Express后端的鉴权逻辑期望这个头的值是 Bearer <token> 的格式，而你当前代码直接传递了token本身，这很可能就是核心原因。

下面是具体的排查和修复步骤：

1. 修正Authorization头的格式 #

Postman里如果选择了「Bearer Token」选项，工具会自动给你加上Bearer 前缀，但你的Angular代码里直接用了${token}，没有这个前缀。后端验证时识别不到正确的鉴权格式，就会拒绝请求。

修改你的代码，给token加上Bearer 前缀：

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

this.http.get<Response>(`${this.apiURL}dashboard/`, { headers: headers })
  .subscribe(res => console.log(res));

2. 额外排查点（如果上述修改后仍无效） #

检查Express后端的CORS配置 #

如果后端没有正确配置CORS，浏览器会拦截带有自定义头的请求。确保你的Express项目使用了cors中间件，并允许Authorization头：

const cors = require('cors');
app.use(cors({
  allowedHeaders: ['Authorization', 'Content-Type'], // 明确允许Authorization头
  credentials: true // 如果请求需要携带Cookie，开启这个选项
}));

确认Token的有效性 #

把Angular代码里的token复制出来，在Postman里手动模拟请求：如果Postman里不带Bearer 前缀能正常访问，那说明后端的鉴权逻辑不需要前缀，这时候你需要检查其他问题；如果必须带前缀才能访问，那回到第一步的修改就没问题。

验证请求头是否真的发送了 #

打开浏览器的开发者工具（F12），切换到「Network」面板，找到你的dashboard请求，查看「Request Headers」里是否包含正确的Authorization项。如果没看到，试试用对象初始化的方式创建HttpHeaders（避免链式调用可能的不可变性问题）：

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

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