无法通过容器名连接React前端容器与Node后端容器

问题根源 #

浏览器运行在宿主机环境，不属于Docker Compose创建的容器网络，因此无法解析仅在容器网络内有效的server主机名。容器内部能正常通信是因为Docker为同一网络内的容器提供了DNS解析，但浏览器不在这个网络中，自然找不到server对应的IP。

可行解决方案 #

1. 前端代理配置（推荐，适配开发/生产环境） #

开发环境（React开发服务器）

在React项目的package.json中添加proxy字段，将前端请求转发到后端容器：

{
  "name": "your-react-app",
  "proxy": "http://server:5000",
  // 其他配置...
}

修改前端请求代码，去掉完整域名，直接用相对路径：

// 原代码：fetch('http://server:5000/add', ...)
fetch('/add', {
  method: 'POST',
  // 其他请求配置...
})

React开发服务器会自动将以/开头的请求转发到proxy配置的地址，容器内的开发服务器能解析server主机名，实现通信。

生产环境（Nginx部署前端）

如果是生产构建后的React项目，用Nginx容器部署，修改Nginx配置文件nginx.conf，添加反向代理规则：

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  # 匹配后端API请求，转发到后端容器
  location /api {
    proxy_pass http://server:5000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }

  # 处理React路由的刷新问题
  location / {
    try_files $uri $uri/ /index.html;
  }
}

前端请求代码改为/api/add，Nginx容器在Docker网络内可解析server，将请求转发到后端。同时确保Nginx容器和后端容器在同一Docker网络中。

2. 映射后端端口到宿主机，前端请求宿主机地址 #

在docker-compose.yaml中为后端容器添加端口映射：

services:
  server:
    build: ./server
    ports:
      - "5000:5000"  # 宿主机端口:容器端口
    # 其他配置...

修改前端请求代码，使用宿主机的localhost或IP加上映射的端口：

fetch('http://localhost:5000/add', {
  method: 'POST',
  // 其他请求配置...
})

注意：此时浏览器发起的是跨域请求，需确保后端的CORS配置允许前端的地址（比如http://localhost:3000），例如Node后端的CORS配置：

const cors = require('cors');
app.use(cors({ origin: 'http://localhost:3000' }));

3. 修改宿主机hosts文件（不推荐，仅本地测试用） #

在宿主机的hosts文件中添加一行，将server指向宿主机的IP地址：

127.0.0.1 server

这样浏览器能解析server为宿主机IP，再通过端口映射访问后端。但该方法仅适用于本地测试，无法在其他机器上复用，不适合生产环境。

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