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

Question

我得到了一个简单的下一个应用程序，我正在做一个外部API调用来获取一些数据。直到几天前，当应用程序发出API请求时，我可以在网络选项卡中看到它试图调用的URL，在需要调用的实际URL前面添加了下一个应用程序的地址(localhost:3000)，例如:而不是http://{serverAddress}/api/articles，它调用http://localhost:3000/{serverAddress}/api/articles，此请求解析为404 Not Found。

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

我没有尝试过使用其他库，如axios，使这个请求，因为简单地考虑到我的应用程序工作得很好，只使用fetch是没有意义的，所以我想了解为什么这种情况发生在我未来的经验。

自从我的应用程序工作以来，我没有做任何代码更改，然而，我正在Dockerizing我的服务，所以我安装了Docker和WSL2与Ubuntu。我在另一台机器上部署这些容器，现在，当这个问题发生时，我调用的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，除非您提供协议名称。

输入env变量:

NEXT_PUBLIC_API_URL=http://server_address

或者用协议名作为fetch调用的前缀:

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