Next.JS

Question

我有一个简单的 Next 应用程序，我在其中进行外部 API 调用以获取一些数据。直到几天前，这一切都很好——当应用程序发出 API 请求时，我可以在网络选项卡中看到它试图调用的 URL 获得了下一个应用程序的地址（localhost:3000) 放在需要调用的实际 URL 前面，例如：调用 http://localhost:3000/{serverAddress}/api/articles 而不是 http://{serverAddress}/api/articles 并且此请求解析为 404 Not Found.

要拨打 API，我使用的是 fetch。在发出请求之前，我已经记录了传递到 fetch 的 URL，它是我需要的正确 URL。我还通过使用 Postman.

向预期的 URL 发出请求，确认我的 API 正在按预期工作

我没有尝试使用 axios 之类的其他库来发出此请求，因为考虑到我的应用程序仅使用 fetch 就可以正常运行，这根本没有意义，所以我想了解为什么我以后的经历会这样。

自从我的应用程序运行以来，我没有进行任何代码更改，但是，我正在Docker调整我的服务，所以我安装了Docker 和 WSL2 与 Ubuntu。我在另一台机器上部署这些容器，现在，当这个问题发生时，我正在调用的 API 和 Next 应用程序都直接在我的开发机器上运行。

我看到 this post，我确认 URL 中没有任何空格，但是，正如一条评论提到的，我安装了 WSL2 ，但是，我不是运行通过 WSL 终端的应用程序。此外，我尝试执行 wsl --shutdown 以查看是否有帮助，不幸的是问题仍然存在。如果这是问题的原因，我该如何解决？卸载 WSL2？如果不是，问题的另一个可能原因是什么？

提前致谢。

编辑：我用来调用 fetch:

的代码

fetcher.js

export const fetcher = (path, options) =>
    fetch(`${process.env.NEXT_PUBLIC_API_URL}${path}`, options)
        .then(res => res.json());

useArticles.js

import { useSWRInfinite } from 'swr';
import { fetcher } from '../../utils/fetcher';

const getKey = (pageIndex, previousPageData, pageSize) => {
  if (previousPageData && !previousPageData.length) return null;
  return `/api/articles?page=${pageIndex}&limit=${pageSize}`;
};

export default function useArticles(pageSize) {
  const { data, error, isValidating, size, setSize } = useSWRInfinite(
    (pageIndex, previousPageData) =>
      getKey(pageIndex, previousPageData, pageSize),
    fetcher
  );

return {
    data,
    error,
    isValidating,
    size,
    setSize
  };
}

Answer 1

您的 API 通话中可能缺少协议 (http/https)。默认情况下，Fetch 会调用主机服务器 URL，除非您提供协议名称。

要么放到环境变量中：

NEXT_PUBLIC_API_URL=http://server_address

或者在您的 fetch 调用前加上协议名称：

fetch(`http://${process.env.NEXT_PUBLIC_API_URL}${path}`, options)

Next.JS - 本地主机在进行外部 API 调用时被添加到前面

Next.JS - localhost is prepended when making external API call

fetch

wsl-2