MERN应用前端获取登录状态始终返回false，后端功能正常

核心问题 #

后端通过loginStatus接口判断登录状态时，前端请求无法正确传递cookie中的JWT token，导致接口始终返回false，但用Insomnia测试功能正常。

排查与解决步骤 #

1. 前端axios请求未携带跨域凭证 #

浏览器默认跨域请求不会自动携带cookie，需在axios请求中显式开启凭证携带：

修改前端getLoginStatus函数：

export const getLoginStatus = async () => {
  try {
    const response = await axios.get(`${BACKEND_URL}/api/users/loggedin`, {
      withCredentials: true // 新增该配置
    });
    return response.data;
  } catch (error) {
    const message =
      (error.message && error.response.data && error.response.data.message) ||
      error.message ||
      error.toString();
    toast.error(message);
  }
};

2. 后端CORS配置未允许凭证传递 #

后端需配置CORS允许跨域凭证，同时不能使用通配符*作为origin，需指定前端具体域名：

假设使用cors包，修改后端CORS配置：

const corsOptions = {
  origin: process.env.FRONTEND_URL, // 例如 "http://localhost:3000"
  credentials: true,
};
app.use(cors(corsOptions));

3. 登录接口的Cookie参数设置错误 #

登录时设置cookie的参数需适配跨域场景，确保前端能正确接收并在后续请求中携带：

修改登录接口的cookie设置代码：

res.cookie("token", token, {
  httpOnly: true, // 防止XSS攻击
  secure: process.env.NODE_ENV === "production", // 生产环境开启（仅HTTPS）
  sameSite: "none", // 跨域场景需设置为none
  maxAge: 30 * 24 * 60 * 60 * 1000, // 30天有效期
  path: "/" // 确保所有路由可访问该cookie
});

注意：sameSite: "none"必须配合secure: true使用，因此生产环境需部署HTTPS服务。

4. 后端调试验证流程 #

在loginStatus函数中添加日志，确认token获取和JWT验证情况：

const loginStatus = asyncHandler(async (req, res) => {
  const token = req.cookies.token;
  console.log("Received token from cookie:", token); // 新增日志
  if (!token) return res.json(false);

  //Verify Token
  try {
    const verified = jwt.verify(token, process.env.JWT_SECRET);
    console.log("JWT verification result:", verified); // 新增日志
    if (verified) return res.json(true);
  } catch (err) {
    console.log("JWT verification failed:", err.message); // 捕获验证错误
  }

  return res.json(false);
});

通过日志可快速定位是token未传递，还是验证过程出错。

内容的提问来源于stack exchange，提问作者A.C Chafai