Node.js服务设置Cookie后浏览器未加载问题排查求助

核心问题：跨源Cookie域不匹配 #

前端页面运行在http://localhost:3001，但Axios请求的后端地址是http://127.0.0.1:3000——浏览器会将localhost和127.0.0.1判定为不同源，后端默认绑定127.0.0.1域的Cookie，无法被localhost的前端页面存储和读取。

具体修复步骤 #

1. 统一前后端请求的域名/IP #

修改前端Axios请求地址，将127.0.0.1替换为localhost，保持与前端页面域名一致：

const res = await axios.post(
    "http://localhost:3000/api/v1/users/login", // 替换为localhost
    {
        email: email.current.value,
        password: password.current.value,
    },
    { withCredentials: true }
);

2. 显式指定Cookie的domain属性 #

在后端设置Cookie时，添加domain: "localhost"，确保Cookie能被同域前端识别：

res.cookie("jwt", jwt_, {
    expires: new Date(
        Date.now() + process.env.COOKIESEXPIRES * 24 * 60 * 60000
    ),
    httpOnly: false,
    secure: false,
    domain: "localhost", // 新增该行
});

3. 确认CORS中间件执行顺序 #

确保app.use(cors(...))放在所有路由定义之前，CORS配置必须先于路由生效，否则跨域凭证会失效。

4. 校验环境变量有效性 #

确保process.env.COOKIESEXPIRES是有效数字（例如7代表7天），若为字符串类型需转成数字，避免Cookie过期时间异常：

expires: new Date(
    Date.now() + Number(process.env.COOKIESEXPIRES) * 24 * 60 * 60 * 1000
),

验证方式 #

修复完成后，执行登录请求：

• 打开浏览器开发者工具（F12）→ Application → Cookies → http://localhost:3000，确认jwt Cookie存在；
• 后续请求时检查Request Headers，确认是否携带Cookie: jwt=xxx。

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