多容器部署中NextJS无法调用Node.js后端服务问题

出错原因拆解 #

1. 用http://localhost:3050/api/getRandomNumber请求时：Next.js容器内的localhost指向容器自身，而非宿主机，因此无法访问到宿主机上的Nginx服务。
2. 用/api/getRandomNumber请求时：要么是Nginx反向代理配置存在路径匹配问题，要么是后端服务未配置CORS，导致浏览器拦截跨域请求。

可直接落地的解决方案 #

1. 容器间用服务名通信（最省心的标准方案） #

Docker Compose默认会给所有服务创建同一网络，服务间可直接通过服务名访问。修改page.tsx中的fetch代码：

// page.tsx
fetch("http://nodeapp:3000/getRandomNumber")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

注：nodeapp是你docker-compose.yml中后端服务的名称，3000是后端容器内部监听的端口，需与配置一致。

2. 配置环境变量+开启CORS #

第一步，在Next.js项目根目录创建.env.local文件：

NEXT_PUBLIC_API_URL=http://localhost:3050/api

第二步，修改page.tsx的fetch逻辑：

fetch(`${process.env.NEXT_PUBLIC_API_URL}/getRandomNumber`)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

第三步，给后端Express服务添加CORS配置，避免浏览器跨域拦截：

// nodeapp的Express代码中引入并使用cors
const cors = require('cors');
app.use(cors({ origin: 'http://localhost:3050' }));

3. 修正Nginx反向代理配置 #

确保Nginx的路径转发规则正确，重点注意proxy_pass末尾的斜杠：

server {
  listen 80;

  location /api {
    proxy_pass http://nodeapp:3000/;  # 末尾斜杠必须加，否则请求路径会变成/api/getRandomNumber，后端无法识别
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }

  location / {
    proxy_pass http://nextapp:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

修改完成后重启Nginx容器：docker-compose restart nginx

验证步骤 #

执行命令重启所有服务：docker-compose down && docker-compose up -d，然后刷新Next.js页面，检查fetch请求是否正常返回数据。

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