Next.js 14服务端Fetch本地API请求失败问题求助

问题核心 #

服务端组件在Node.js环境执行fetch('http://api.localdomain.test/v1/page')时出现ECONNREFUSED 127.0.0.1:80错误，但客户端用Axios调用能正常返回数据，本质是服务端环境与客户端环境的网络访问逻辑差异导致的。

具体解决步骤 #

1. 确认本地API的运行端口 #

错误日志显示请求的是80端口，先检查你的本地API是否真的在80端口监听：

• 查看API的启动配置，确认实际端口号（常见如3001、8000等）
• 如果API不在80端口，修改服务端的fetch地址为http://api.localdomain.test:端口号/v1/page

2. 验证Node.js环境的域名解析 #

客户端浏览器能解析api.localdomain.test，但Node.js环境可能没读取到hosts配置：

• 在终端执行以下命令，检查Node是否能正确解析域名：

  node -e "require('dns').lookup('api.localdomain.test', (err, addr) => console.log(addr))"
  

• 如果输出不是127.0.0.1，检查hosts文件：
  • Windows：C:\Windows\System32\drivers\etc\hosts
  • Mac/Linux：/etc/hosts
  • 确保添加一行：127.0.0.1 api.localdomain.test
• 修改hosts后刷新DNS：
  • Windows：ipconfig /flushdns
  • Mac：sudo dscacheutil -flushcache

3. 直接使用IP+端口访问（绕过域名解析） #

如果域名解析问题暂时无法解决，直接用本地IP+API端口请求：

const response = await fetch('http://127.0.0.1:你的API端口/v1/page');

4. Docker环境特殊处理 #

如果Next.js运行在Docker容器中，访问宿主机的本地API不能用127.0.0.1，需要替换为宿主机IP或专用域名：

// Docker Desktop环境可用host.docker.internal
const response = await fetch('http://host.docker.internal:你的API端口/v1/page');

5. 用环境变量统一配置 #

服务端组件可使用非NEXT_PUBLIC_前缀的环境变量（避免暴露给客户端），在.env文件中配置：

BACKEND_URL=http://api.localdomain.test:你的API端口

然后修改服务端代码：

const getPage = async () => {
    const response = await fetch(`${process.env.BACKEND_URL}/v1/page`);
    if(!response.ok) {
        throw new Error('Failed to fetch data');
    }
    return response.json();
}

为什么客户端Axios能成功？ #

客户端组件在浏览器环境运行，浏览器会读取本地hosts文件解析api.localdomain.test，且Axios的baseURL从NEXT_PUBLIC_BACKEND_URL环境变量获取，浏览器能正确发起请求；而服务端组件在Node.js环境执行，若域名解析未生效或端口不匹配，就会出现连接拒绝错误。

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