Next.js中getServerSideProps请求Passport.js接口如何携带Cookie？

问题背景 #

在Next.js项目中，通过客户端useEffect调用Passport.js的登录状态接口能正常获取用户数据，但使用getServerSideProps发起相同请求时，后端无法识别登录用户，推测是请求未携带Cookie导致。

前端代码 #

import axios from "axios";
import React, { useEffect } from "react";

const Login = () => {
// perfectly working.
  useEffect(() => {
    const getUser = async () => {
      const { data } = await axios.get(
        "http://localhost:5000/auth/login/success",
        {
          withCredentials: true,
        }
      );
      console.log(data.user);
    };
    getUser();
  }, []);

  const google = () => {
    try {
      window.open(`http://localhost:5000/auth/google`, "_self");
    } catch (error) {}
  };
  return <button onClick={google}>Login with Google</button>;
};

export default Login;

// do not work
export async function getServerSideProps(context) {
  try {
    const { data } = await axios.get(
      "http://localhost:5000/auth/login/success",
      {
        withCredentials: true,
      }
    );
    console.log(data);
    return {
      props: {
        user: data.user,
      },
    };
  } catch (error) {
    return {
      props: {
        user: false,
      },
    };
  }
}

后端代码 #

router.get("/login/success", (req, res) => {
  console.log(req.user);
  if (req.user) {
    res.status(200).json({
      success: true,
      message: "successfull",
      isLoggedIn: true,
      user: req.user,
    });
  } else {
    res.status(401).json({
      success: false,
      message: "Unauthorized: User is not logged in",
    });
  }
});

解决方案 #

问题核心是getServerSideProps运行在服务器端，客户端Cookie不会自动传递给这个服务器端发起的请求，需要从context中取出客户端Cookie，手动添加到axios请求的headers里。

修改后的getServerSideProps代码如下：

export async function getServerSideProps(context) {
  try {
    const { data } = await axios.get(
      "http://localhost:5000/auth/login/success",
      {
        headers: {
          // 从context中获取客户端的Cookie
          Cookie: context.req.headers.cookie || ""
        }
      }
    );
    console.log(data);
    return {
      props: {
        user: data.user,
      },
    };
  } catch (error) {
    return {
      props: {
        user: false,
      },
    };
  }
}

关键说明 #

• context.req.headers.cookie包含客户端请求页面时携带的所有Cookie，将其直接传递给后端接口的headers，就能让Passport.js识别当前登录用户。
• 需处理cookie为空的情况，避免headers中出现Cookie: undefined导致请求异常。
• 确保前后端Cookie配置（如domain、sameSite）符合跨域要求，否则客户端Cookie不会传递到Next.js服务器。

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