Docker隔离网络中NextJS无法访问Rust后端端点问题排查

出现net::ERR_NAME_NOT_RESOLVED的核心原因是：浏览器运行在宿主机环境，无法识别Docker内部网络的服务名rustserver-dc——这个域名只有Docker内部DNS能解析，而容器内curl能正常请求，是因为容器处于Docker网络中，可直接通过服务名寻址后端。

你的需求是仅让NextJS访问后端/数据库，不对外暴露后端服务，以下是两种可行解决方案：

方案一：NextJS API路由代理（推荐） #

利用NextJS内置的API路由功能，让前端请求先发送到NextJS服务，再由NextJS（处于Docker网络内）转发到Rust后端，无需修改Nginx配置。

步骤1：创建代理路由文件 #

在NextJS项目中创建pages/api/proxy/[...path].js（若使用App Router则对应app/api/proxy/[...path]/route.js）：

// Pages Router 版本
import axios from 'axios';
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req, res) {
  const { path } = req.query;
  try {
    const response = await axios({
      method: req.method,
      url: `http://rustserver-dc:10000/${path?.join('/') || ''}`,
      data: req.body,
      headers: { ...req.headers, host: 'rustserver-dc' },
    });
    res.status(response.status).json(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).json(error.response?.data || { error: '代理请求失败' });
  }
}

步骤2：修改前端请求地址 #

将原请求的http://rustserver-dc:10000替换为NextJS的API路由：

// 修改后的Home组件useEffect部分
useEffect(() => {
  axios.get('/api/proxy')
    .then(res => setData(res.data))
    .catch(err => console.log(err));
}, []);

方案二：Nginx新增反向代理规则 #

通过Nginx统一转发API请求，让前端请求先到Nginx，再由Nginx转发到Docker内部的Rust后端。

步骤1：修改Nginx配置 #

在原nginx.conf的server块中新增API转发规则：

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  sendfile on;

  upstream nextjs {
    server nextjs-app:3000;
  }

  # 新增Rust后端上游配置
  upstream rust-api {
    server rustserver-dc:10000;
  }

  server {
    listen 80 default_server;

    # 转发NextJS页面请求
    location / {
      proxy_pass http://nextjs;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }

    # 转发API请求到Rust后端
    location /api {
      proxy_pass http://rust-api/; # 末尾斜杠保证路径正确转发
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  }
}

步骤2：修改前端请求地址 #

将原请求地址改为/api：

// 修改后的Home组件useEffect部分
useEffect(() => {
  axios.get('/api')
    .then(res => setData(res.data))
    .catch(err => console.log(err));
}, []);

两种方案对比 #

• 方案一：无需调整Nginx，由NextJS内部处理转发，网络路径更短，适合前后端耦合度较高的场景。
• 方案二：通过Nginx集中管理路由，便于后续添加缓存、限流等Nginx特性，适合需要统一网关的场景。

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