Express无AJAX场景携带Bearer Token的服务端重定向实现

所有导致方案失效的硬伤点如下：

• HTTP重定向规范的硬限制：你在/loginDetour接口里手动通过res.setHeader('Authorization', xxx)设置的自定义响应头，在浏览器收到302响应后跳转目标路径时会被完全丢弃——浏览器只会解析3xx响应里的Location字段来发起新请求，所有自定义响应头都不会被带到后续的跳转请求中。
• AJAX重定向的安全限制：你现在用axios/fetch发/loginDetour请求本质是AJAX调用，浏览器在AJAX上下文中自动跟随302跳转时，会强制清空手动设置的所有自定义请求头（包括Authorization），导致最终请求/时，checkAuth中间件根本拿不到Token，直接被重定向回登录页，完全不符合你“不使用AJAX完成跳转”的要求。
• 代码层面的bug：/loginDetour的异常捕获分支里，错误信息引用了未定义的error变量，实际捕获到的错误对象是err，这段代码只要触发异常就会直接抛出运行时错误，根本走不到重定向逻辑。

• 打开浏览器开发者工具的网络面板，完整追踪请求链：依次确认前端是否正确携带Token请求头调用/loginDetour、/loginDetour返回的302状态和Location指向是否正确、最终请求根路径/时的请求头里是否存在Authorization字段——绝大多数场景下会看到/的请求头完全没有Authorization，直接被重定向回/login。
• 查看服务端日志，确认/loginDetour路由是否真的能拿到前端传递的Authorization头，有没有因为未定义变量的问题触发500错误。
• 确认浏览器的重定向跟随行为：现代浏览器对AJAX请求的重定向跟随做了严格的安全限制，自定义头跨跳转传递默认是被禁止的，这不是代码逻辑错误，是规范要求。

核心思路是绕开“浏览器无法跨重定向传递自定义请求头”的限制，通过服务端中转把Token转换成浏览器自动携带的Cookie，完成整页跳转，全程不需要AJAX参与：

1. 引入Cookie解析依赖，在主应用配置中间件：

   // 安装依赖：npm i cookie-parser
   const cookieParser = require('cookie-parser');
   app.use(cookieParser());
   

2. 改造/loginDetour中转路由，修正代码bug：

   router.get('/loginDetour', async (req, res) => {
     try {
       // 优先从请求头取Token，兼容从URL参数传Token的场景
       const authValue = req.headers.authorization || `Bearer ${req.query.token}`;
       if (!authValue?.startsWith('Bearer ')) {
         return res.redirect('/login');
       }
       // 将Token存入HttpOnly安全Cookie，后续浏览器请求会自动携带
       res.cookie('access_token', authValue, {
         httpOnly: true, // 禁止前端JS读取，避免XSS窃取
         secure: process.env.NODE_ENV === 'production', // 生产环境仅HTTPS传输
         maxAge: 3600 * 1000, // 与Token有效期对齐
         sameSite: 'lax' // 防止CSRF攻击
       })
       // 直接返回302重定向，不需要手动设置自定义响应头
       return res.redirect('/');
     } catch (err) {
       // 修正之前未定义变量的bug
       res.status(400).json({ errMsg: err.message });
     }
   });
   

3. 调整checkAuth中间件的Token读取逻辑，兼容Cookie来源：

   const checkAuth = async (req, res, next) => {
     // 优先从请求头读Token，拿不到就从Cookie里读
     const authSource = req.headers.authorization || req.cookies.access_token;
     if (!authSource) {
       return res.redirect('/login');
     }
     try {
       const token = authSource.split('Bearer ')[1];
       const decoded = await admin.auth().verifyIdToken(token);
       if (!decoded.uid) {
         return res.clearCookie('access_token').redirect('/login');
       }
       req.uid = decoded.uid;
       next();
     } catch (err) {
       // Token校验失败时清除无效Cookie，跳转登录页
       res.clearCookie('access_token');
       return res.redirect('/login');
     }
   };
   

4. 改造前端登录逻辑，替换AJAX跳转为浏览器原生整页导航：

   if(token){
     localStorage.setItem('token', token);
     // 替换原来的axios AJAX调用，触发原生整页跳转，完全不使用AJAX
     window.location.href = `/loginDetour?token=${encodeURIComponent(token)}`;
   }
   

• 不要依赖302响应头传递自定义认证信息：按照HTTP规范，3xx响应仅靠Location字段驱动后续跳转，所有自定义响应头都不会被浏览器带到下一次请求中，这种实现从根上就是行不通的。
• 不要用AJAX链路做跨路径的认证跳转：AJAX上下文的重定向是被请求API本身控制的，不是浏览器原生导航行为，自定义请求头在重定向过程中会被浏览器强制清除，完全达不到带Token跳转的效果。
• 不要把敏感Token存储在非HttpOnly的前端存储里然后手动塞请求头：这种方式每次路由跳转都需要前端JS手动注入头，维护成本高还容易引入XSS漏洞，通过中转路由存HttpOnly Cookie的方式，浏览器会自动为所有同源请求带上认证信息，和原生页面导航的体验完全一致。

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