getServerSideProps调用POST API返回401但useEffect正常

完全可以在getServerSideProps中调用POST接口做服务端数据预取，不存在方法层面的限制，和水合逻辑也没有冲突。你遇到的401错误和POST请求方法无关，根因是服务端发起请求时没有携带合法的身份认证凭证。

两种调用场景的本质区别 #

• useEffect里的请求运行在用户浏览器环境：浏览器会自动带上当前站点的Cookie、请求拦截器注入的本地存储token等鉴权信息，接口能识别到合法用户身份，所以请求正常。
• getServerSideProps里的请求运行在Next.js的Node.js服务端：
  • 不会自动携带用户浏览器侧存储的任何鉴权凭证（Cookie、localStorage里的token都不会自动带）
  • 如果你封装的apiService默认从window等浏览器全局对象读鉴权信息，服务端运行时这部分值为空
  • 服务端默认发出的请求头、来源IP和浏览器侧请求不一致，内部API的鉴权规则会直接拦截无凭证请求，返回401。

现有代码的问题 #

你贴的代码本身存在逻辑错误：

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const data = await apiService.valuation('1234');
  return data; // 此处提前返回，后续代码永远不会执行
  // 且getServerSideProps必须返回固定结构的{ props: 数据 }格式，直接返回接口响应本身不符合Next.js规范
  return {
    props: {},
  };
};

修复步骤 #

1. 修正返回结构，删掉提前返回的无效代码，保证getServerSideProps返回符合规范的对象
2. 从getServerSideProps自带的ctx上下文里提取用户请求携带的鉴权信息，调用内部API时手动透传到请求头中：

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  try {
    // 提取用户原始请求里的Cookie和鉴权头
    const { cookie: userCookie, authorization: authToken } = ctx.req.headers;
    // 调用接口时手动附加鉴权信息
    const valuationData = await apiService.valuation('1234', {
      headers: {
        ...(userCookie ? { Cookie: userCookie } : {}),
        ...(authToken ? { Authorization: authToken } : {})
      }
    });

    return {
      props: {
        valuationData
      }
    };
  } catch (e) {
    // 鉴权失效时可直接重定向到登录页
    return {
      redirect: {
        destination: '/login',
        permanent: false
      }
    };
  }
};

3. 检查apiService的封装逻辑，确保服务端运行时不会依赖window、document等浏览器专属全局对象，避免运行时报错。

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