在TypeScript/JavaScript/HTML中跨页面获取认证Cookie及存储异常问题

先梳理你代码里的核心问题 #

1. 未定义的resLogin.ok会导致条件判断失效，后续存localStorage的代码根本没执行，所以console.log返回undefined（你说的void实际是指这个）。
2. 后端设置Cookie时未指定path，默认仅在当前接口路径下生效，跳转后页面路径不同就无法读取。
3. 没必要通过GetToken接口拿token——既然浏览器已经收到Cookie，直接读取即可。

具体修复方案 #

1. 修复前端登录请求的代码错误

先确保resLogin是登录请求的响应对象，再完善判断逻辑：

// 先发起登录请求
const resLogin = await fetch("http://100.93.233.91:3000/login", {
  method: "POST",
  body: JSON.stringify({ AccEmail, AccPassword }),
  headers: { "Content-Type": "application/json" },
  credentials: "include"
});

if(resLogin.ok){
    // 直接读取浏览器中的Cookie，无需额外请求
    const token = getCookie("authToken");
    if(token){
        localStorage.setItem("authtoken", token);
        console.log(localStorage.getItem("authtoken"));
        window.location.href = "MainPage.html";
    } else {
        console.error("未获取到authToken Cookie");
    }
}

// 辅助函数：读取指定名称的Cookie
function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
}

2. 优化后端Cookie配置，确保跨路径可用

后端设置Cookie时指定path: "/"，让整个域名下的所有页面都能访问到：

const token = await ViewToken(AccEmail, AccPassword);
res.statusCode = 200;
res.cookie("authToken", token, {
    httpOnly: false,
    path: "/", // 关键：指定根路径，所有子路径页面都能读取
    sameSite: "Lax" // 根据场景选Strict/Lax/None，None需配合secure属性
}).send();

3. 跨页面使用的两种方式

• 直接用Cookie：在MainPage.html中调用上面的getCookie("authToken")即可，只要Cookie配置正确，同域页面直接读取。
• 用localStorage共享：因为localStorage是同源共享的，在MainPage.html中直接执行localStorage.getItem("authtoken")就能拿到存储的值。

排查要点 #

• 打开浏览器开发者工具的Application面板，登录后查看Cookie是否存在，检查path、domain是否符合预期。
• 确认所有页面都是同源（比如都是http://100.93.233.91:3000下的页面），跨域场景下Cookie和localStorage无法直接共享。
• 若坚持用GetToken接口，先在Network面板查看该请求的响应，确认是否返回了有效token。

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