Angular未在请求头中设置Token问题咨询

嘿，我来帮你搞定这个请求头缺失的问题！从你提供的代码和描述来看，有几个常见的原因可能导致这个情况，咱们一步步排查：

1. 确认HttpHeaders的使用是否正确 #

Angular的HttpHeaders是不可变对象——调用set()方法不会修改原实例，而是返回一个新的Headers对象。你的链式调用写法其实是对的，但可以换一种更直观的写法避免疏漏：

const headers = new HttpHeaders({
  'Authorization': userToken
});

写完后可以通过console.log(headers.get('Authorization'))再次确认头信息是否正确设置。

2. 检查Token的格式是否匹配后端要求 #

绝大多数后端API要求Authorization头遵循固定格式，比如 Token <你的token值> 或者 Bearer <你的token值>（具体取决于后端的配置）。如果你直接传入token字符串，可能不符合后端预期，甚至会被忽略。修改代码试试：

// 假设后端采用Token格式，Bearer的话替换成'Bearer'即可
const headers = new HttpHeaders().set('Authorization', `Token ${userToken}`);

3. 排查跨域（CORS）配置问题 #

如果前端和后端不在同一域名/端口下，浏览器会发起预检OPTIONS请求。此时需要Node.js后端配置CORS，明确允许Authorization请求头，否则浏览器会自动移除这个头。

如果用的是cors中间件，配置示例如下：

const cors = require('cors');
app.use(cors({
  origin: '你的前端域名', // 比如http://localhost:4200
  allowedHeaders: ['Authorization', 'Content-Type'], // 必须包含Authorization
  credentials: true // 若需要携带Cookie则开启，可选
}));

4. 检查是否有HTTP拦截器覆盖了请求头 #

如果你在Angular项目中配置了HTTP拦截器，有可能拦截器在处理请求时覆盖或清除了Authorization头。可以暂时禁用拦截器，或者检查拦截器代码，确保它保留了你手动设置的头信息。

5. 验证Token是否有效获取 #

在获取token后，加个日志确认它不是null或undefined：

const userToken = localStorage.getItem('token');
console.log('获取到的Token:', userToken);
if (!userToken) {
  // 处理token不存在的情况，比如跳转登录页
  return;
}

最后，你可以在浏览器开发者工具中：

• 查看OPTIONS预检请求的响应头，确认Access-Control-Allow-Headers包含Authorization
• 查看实际GET请求的请求头，确认Authorization字段是否存在（格式错误的话，浏览器仍会显示该头，但后端可能不识别）

内容的提问来源于stack exchange，提问作者Guilherme de Mello