NextJS 13客户端设置Cookie失败求助：JWT无法存入Cookie

问题根源分析 #

1. 服务端JWT变量类型错误：你定义的token是包含token属性的对象，而非直接的JWT字符串。将对象放入响应头时会被转为[object Object]，导致Cookie存储内容无效。
2. Set-Cookie模板语法错误：用单引号包裹Cookie内容，单引号不解析模板变量${token}，导致Cookie值被设为字面量${token}而非实际JWT。
3. 无效的单独Path头：单独设置res.setHeader("Path", '/student' )无意义，Path需作为Set-Cookie头的一部分指定。
4. 客户端获取的Authorization头内容错误：服务端传递的是对象而非字符串，客户端拿到的token是[object Object]，存入Cookie后无法被正确读取。

分步修复方案 #

1. 修复服务端/api/submit.js代码 #

修改JWT生成与响应头设置逻辑：

if (auth.checkPass(rowvals[0].stu_pass, data)) {
    // 直接生成JWT字符串，而非对象
    const token = jwt.sign(
        {
            username: rowvals[0].stu_email,
            admin: true,
        },
        KEY
    );
    res.setHeader('Content-Type', 'application/json');
    // Authorization头传递纯JWT字符串
    res.setHeader('Authorization', token);
    // 用反引号解析模板变量，将Path整合到Set-Cookie中
    res.setHeader("Set-Cookie", `token=${token}; Max-Age=604800; SameSite=Strict; Path=/student`);
    res.send(JSON.stringify({ message: 'Logged in'}));
} else {
    res.send(JSON.stringify({ message: "Wrong Password" }));
}

2. 确保客户端Cookie操作函数正确 #

检查utils/auth.js中的setTokenCookie和getTokenCookie实现，确保符合标准Cookie操作逻辑：

// 设置Cookie
export function setTokenCookie(token) {
    document.cookie = `token=${token}; Max-Age=604800; SameSite=Strict; Path=/student`;
}

// 获取Cookie
export function getTokenCookie() {
    const cookiePairs = document.cookie.split(';').map(cookie => cookie.trim());
    for (const pair of cookiePairs) {
        const [name, value] = pair.split('=');
        if (name === 'token') {
            return value;
        }
    }
    return null;
}

3. 验证客户端Login.js逻辑 #

此时客户端从响应头拿到的是正确的JWT字符串，调用setTokenCookie后，getTokenCookie即可正常返回JWT值。

额外注意事项 #

• 若网站部署在HTTPS环境，建议给Cookie添加Secure属性，确保仅通过HTTPS传输；
• 跨域场景下需调整SameSite为Lax或None（搭配Secure），同时请求需配置credentials: 'include'。

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