Next.JS - 进行外部 API 调用时会在前面添加 localhost

Question

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

为了进行 API 调用，我使用fetch. 在发出请求之前，我已记录了传入的 URL fetch，它是我需要的正确 URL。我还通过使用Postman向预期的 URL 发出请求，确认我的 API 正在按预期工作。

我没有尝试过使用其他库来axios提出此请​​求，因为考虑到我的应用程序仅使用即可完美运行，所以这是没有意义的，fetch所以我想了解为什么会在我未来的体验中发生这种情况。

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

我看到这篇文章，我确认 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 调用的前缀：

NEXT_PUBLIC_API_URL=http://server_address