遇到 Next.js Fetch 请求 404 错误的情况如何解决

前言

Next.js 是一款基于 React 的服务端渲染框架，由于其快速的开发速度以及优秀的 SEO 表现，越来越多的开发者开始使用它来开发 Web 应用程序。在使用 Next.js 进行开发时，我们通常会使用 Fetch API 来获取数据。然而，在实际开发过程中，我们可能会遇到 Next.js Fetch 请求 404 错误的情况，本文就来探讨一下这个问题。

问题描述

在 Next.js 中，我们通常会使用 getInitialProps 获取数据并渲染页面。例如，下面的示例代码演示了如何使用 getInitialProps 获取数据并渲染页面。

-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- ---------------------

----- ----- - -- ---- -- -- -
  -----
    ----------- ----- -- --- -----------
    -----------------
  ------
--

--------------------- - ----- -- -- -
  ----- --- - ----- ----------------------------------
  ----- ---- - ----- -----------

  ------ - ----- ------------ --
--

------ ------- ------

但是，在实际使用 Fetch API 进行数据获取时，我们可能会遇到 404 错误，这是因为 Next.js 使用了自己的路由系统，而不是直接使用 Express 或者其他的服务器框架。因此，我们需要对 Fetch API 进行一些修改才能使其正常工作。

解决方法

要解决 Next.js Fetch 请求 404 错误的问题，我们需要对 Fetch API 进行一些修改，具体步骤如下：

1. 使用绝对路径

在 Next.js 中，我们需要使用绝对路径来进行 Fetch 请求，而不是相对路径。例如，在上面的示例代码中，我们应该将 Fetch 请求的 URL 修改为 https://example.com/data，而不是 /data。

2. 使用 req.headers.host 来获取主机名

由于 Next.js 使用了自己的路由系统，因此我们不能像在 Express 中那样使用 localhost 或者其他的主机名来进行 Fetch 请求。相反，我们需要使用 req.headers.host 来获取主机名。

Index.getInitialProps = async ({ req }) => {
  const protocol = req.headers['x-forwarded-proto'] || 'http';
  const baseUrl = req ? `${protocol}://${req.headers.host}` : '';
  const res = await fetch(`${baseUrl}/data`);
  const data = await res.json();

  return { data: data.message };
};

上面的示例代码中，我们使用了 req.headers['x-forwarded-proto'] 来获取协议类型，如果没有获取到，则默认使用 http 协议。然后，我们使用 req.headers.host 来获取主机名，并将其与协议类型组合成一个完整的 URL。

3. 配置 next.config.js

最后，我们需要在 next.config.js 中配置 assetPrefix，以确保 Fetch 请求能够正常工作。具体配置如下：

module.exports = {
  assetPrefix: process.env.NODE_ENV === 'production' ? '/your-app-name' : '',
};

上面的示例代码中，我们将 assetPrefix 设置为 /your-app-name，如果当前是生产环境，则将其设置为 /your-app-name，否则设置为空字符串。

总结

在使用 Next.js 进行开发时，我们可能会遇到 Fetch 请求 404 错误的问题。要解决这个问题，我们需要使用绝对路径，使用 req.headers.host 来获取主机名，并在 next.config.js 中配置 assetPrefix。希望本文能够帮助你解决这个问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6630cb54d3423812e4ea9241