Next.js中getInitialProps内Axios无法获取当前用户的问题求助

• 服务端请求需手动传递Cookie
  getInitialProps在服务端执行时，浏览器的Cookie不会自动附加到axios请求中，而客户端的AuthContext能正常获取是因为浏览器自动携带了Cookie。解决时要从请求对象中提取Cookie头，传给axios：

  MyApp.getInitialProps = async ({ req }) => {
    const requestConfig = {};
    // 服务端环境下，从req中获取Cookie
    if (req) {
      requestConfig.headers = {
        Cookie: req.headers.cookie
      };
    }
    try {
      const res = await axios.get(`${process.env.SERVER}/users/auth`, {
        withCredentials: true,
        ...requestConfig
      });
      return { user: res.data };
    } catch (err) {
      // 处理未认证情况，比如返回空用户
      return { user: null };
    }
  };
  

• 检查后端CORS与Session配置
  确保express的CORS配置允许凭证传递，并指定正确的前端域名：

  const cors = require('cors');
  app.use(cors({
    origin: process.env.NEXT_APP_URL, // 你的Next.js应用地址，比如http://localhost:3000
    credentials: true
  }));
  

  同时确认express-session的Cookie配置合理，比如适配环境的secure设置：

  app.use(session({
    secret: 'your-session-secret',
    resave: false,
    saveUninitialized: false,
    cookie: {
      secure: process.env.NODE_ENV === 'production', // 生产环境开启HTTPS时设为true
      httpOnly: true,
      maxAge: 86400000 // 会话有效期1天
    }
  }));
  

• 考虑替换为getServerSideProps（Next.js 9.3+）
  getInitialProps会同时在服务端和客户端执行，逻辑复杂度高。如果你的Next.js版本在9.3以上，推荐在页面级使用getServerSideProps来获取用户信息，或者在_app.js中改用App.getInitialProps的规范写法，确保服务端和客户端的请求逻辑区分清晰。

• 验证请求头的Cookie传递
  可以在后端的/users/auth接口中打印req.headers.cookie，确认服务端是否收到了connect.sid的Cookie值。如果没有收到，检查前端请求的Cookie是否正确携带，或者后端的Cookie配置是否存在domain/path不匹配的问题。

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