Next.js getServerSideProps调用localhost:5000 API遇ECONNREFUSED错误

核心原因 #

getServerSideProps 是在服务器端执行的代码，这里的 localhost 指向的是 Next.js 运行所在的服务器环境，而非你的本地开发机器：

• 若你在本地同时运行 Next.js（默认3000端口）和API服务（5000端口），Next.js服务器进程里的localhost是它自身的网络命名空间，并非你机器的本地回环地址
• 若Next.js运行在Docker容器或虚拟机中，localhost完全无法访问宿主机器的5000端口服务

而Postman/浏览器是在你的本地客户端发起请求，自然能正常访问localhost:5000。

解决方案 #

1. 本地开发环境 #

• 替换localhost为机器局域网IP：比如你的本地IP是192.168.1.100，将请求地址改为http://192.168.1.100:5000/api/charts/2
• Docker容器运行Next.js场景：用host.docker.internal代替localhost，该地址会映射到宿主机器的回环地址，示例：http://host.docker.internal:5000/api/charts/2
• 确保API监听0.0.0.0：修改API服务的启动配置，让它监听0.0.0.0而非127.0.0.1，允许外部网络访问

2. 生产/部署环境 #

• 使用环境变量管理API地址：在.env.local文件中定义：

  NEXT_PUBLIC_API_URL=http://your-api-domain.com/api
  

  代码中调用方式：

  const res = await Axios.get(`${process.env.NEXT_PUBLIC_API_URL}/charts/2`)
  

• 同服务器部署场景：若API和Next.js在同一服务器/容器集群，用内部网络地址（比如Docker Compose的服务名）代替公网地址，示例：http://api-service:5000/api/charts/2

代码额外优化 #

你的Chart初始化逻辑存在问题：data是state变量，直接在组件顶层调用new Chartist.Line会导致初始时data为undefined，需放到useEffect中监听data变化：

useEffect(() => {
  if (data) {
    new Chartist.Line('.ct-chart', data);
  }
}, [data]);

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