Next.js中getServerSideProps用axios请求404但useEffect中正常如何解决？

这个问题是getServerSideProps和useEffect的运行环境差异导致的：

• getServerSideProps运行在Node.js服务端，没有浏览器的上下文环境，发起请求时如果用相对路径，无法自动补全域名、端口等前缀，会直接请求错误地址导致404
• useEffect运行在用户浏览器端，相对路径会自动拼接当前页面的域名、端口，所以可以正常请求到接口
  常见的触发场景是你配置的apiBaseUrl是相对路径（比如值为/api），服务端发起请求时无法解析该路径对应的完整服务地址。

方案1：补全服务端请求的绝对路径 #

在getServerSideProps中针对服务端环境拼接完整的请求地址，可通过环境变量区分开发和生产环境：
首先在项目根目录的.env.local文件中添加配置：

# 客户端使用的相对路径前缀，带NEXT_PUBLIC_前缀的变量客户端可访问
NEXT_PUBLIC_API_BASE=/api
# 服务端使用的完整前缀，开发环境填本地服务地址，生产环境填线上域名
API_BASE=http://localhost:3000/api

然后修改getServerSideProps中的地址拼接逻辑：

export async function getServerSideProps() {
  try {
    // 判断当前运行环境：服务端没有window对象
    const baseUrl = typeof window === 'undefined' ? process.env.API_BASE : process.env.NEXT_PUBLIC_API_BASE;
    const ApiUrl = baseUrl + "/my-url";
    const homeData = await axios
      .get(ApiUrl)
      .then((response) => {
        return response.data;
      })
      .catch((error) => {
        return error.message;
      });

    return {
      props: {
        homeData: homeData,
        error: false,
        ApiUrl: ApiUrl,
      },
    };
  } catch (e) {
    return {
      props: {
        error: true,
        homeData: null,
        message: e.message,
      },
    };
  }
}

方案2：直接调用API逻辑（仅适用于Next.js自带API路由） #

如果你请求的是项目pages/api目录下的Next.js自带接口，完全不需要在getServerSideProps中发起HTTP请求，直接引入接口对应的处理逻辑调用即可，既能避免路径问题，还能减少一次HTTP请求提升性能。

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