Angular重定向后如何保留Authorization请求头？

核心原因 #

浏览器的重定向跳转是无状态的，不会自动携带原请求的Authorization头。你手动在Angular请求里添加头但后端检测不到，先排查两个关键节点：

1. 打开浏览器Network面板，确认你的请求是否真的发送了Authorization头——如果没发，是前端代码的问题；如果发了后端没收到，可能是CORS配置遗漏了允许该头。
2. 确认accessToken的格式是否正确：必须是Bearer <token内容>，缺少前缀会导致后端识别失败。

修复步骤 #

1. 修正Angular请求头设置（针对当前代码） #

Angular的HttpHeaders是不可变对象，虽然你的写法逻辑上可行，但换更直观的方式能确保头被正确设置：

// 确保token带Bearer前缀
const headers = new HttpHeaders()
  .set('Authorization', `Bearer ${yourToken}`);

return this.http.get(`/api/auth/duo/redirect`, {
  observe: 'response',
  headers: headers
});

修改后再次查看Network面板的Request Headers，确认Authorization存在且格式正确。

2. 更可靠的方案：用Cookie存储JWT（彻底解决重定向丢头问题） #

因为重定向无法携带请求头，把JWT放在HttpOnly、Secure、SameSite的Cookie里是更稳妥的方案：

• NodeJS后端：在Duo认证完成的回调接口中，验证通过后设置Cookie，再重定向回前端：

// Duo认证回调逻辑中
res.cookie('authToken', updatedJwtToken, {
  httpOnly: true, // 防止XSS窃取令牌
  secure: process.env.NODE_ENV === 'production', // 生产环境仅HTTPS传输
  sameSite: 'strict', // 防范CSRF攻击
  maxAge: 24 * 60 * 60 * 1000 // 有效期1天
});
// 重定向到前端页面
res.redirect('/dashboard');

• 后端校验逻辑：改为从req.cookies.authToken中获取JWT，替代从Authorization头读取的逻辑。
• Angular前端：无需手动设置Authorization头，浏览器会自动在同域请求中携带Cookie，直接调用API即可：

return this.http.get(`/api/auth/duo/redirect`, { observe: 'response' });

3. 跨域场景下的CORS配置检查 #

如果前端和后端是跨域部署，确保NodeJS的CORS中间件允许携带Authorization头或Cookie：

const corsOptions = {
  origin: '你的前端域名',
  credentials: true, // 允许携带Cookie
  allowedHeaders: ['Authorization', 'Content-Type'] // 明确允许Authorization头
};
app.use(cors(corsOptions));

同时Angular的HTTP请求要开启withCredentials：

return this.http.get(`/api/auth/duo/redirect`, {
  observe: 'response',
  withCredentials: true
});

验证方式 #

1. 完成Duo认证重定向后，查看浏览器Application面板的Cookie，确认authToken存在。
2. 发起API请求时，查看Network面板的Request Headers，确认Cookie被正常携带。
3. 后端打印req.cookies或req.headers.authorization，确认能获取到正确的令牌。

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