Node.js后端响应含Cookie但未在浏览器Application存储显示的问题

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

浏览器会将localhost和127.0.0.1视为不同源，导致Cookie无法跨源存储。把前端请求地址改为http://localhost:5000：

const loginExistingUser = async (userCredentials, thunkApi) => {
  try {
    const response = await axios.post(
      "http://localhost:5000/api/v1/auth/login",
      userCredentials,
      { withCredentials: true }
    );
    return response.data;
  } catch (error) {
    console.error(error);
    return thunkApi.rejectWithValue(error.response.data.msg);
  }
};

2. 显式设置Cookie的Domain属性 #

在后端的cookieOptions中添加domain: "localhost"，确保Cookie绑定到正确的域名：

const cookieOptions = {
  expires: new Date(
    Date.now() + process.env.JWT_COOKIE_EXPIRES_IN * 24 * 60 * 60 * 1000
  ),
  httpOnly: true,
  domain: "localhost",
  sameSite: "Lax", // 本地开发推荐使用Lax，生产环境HTTPS下可设为None并开启secure
};

3. 确认JWT_TOKEN已正确生成 #

检查代码中jwtToken变量是否已正确生成并赋值，空值的Cookie可能被浏览器忽略。

4. 验证CORS中间件顺序 #

确保app.use(cors(...))在所有路由定义之前加载，否则路由请求不会应用CORS配置。

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