Docker+Nginx反向代理环境下React访问Express API的URL配置问题

问题核心 #

React应用运行在用户浏览器中，所有API请求从用户设备直接发起，无法访问Docker内部的容器域名（如api:3001），必须通过对外暴露的Nginx反向代理中转请求。你的Nginx已配置/api路径转发到API容器，只需调整API调用路径并修正Nginx配置细节即可。

具体解决方案 #

1. 修正Nginx配置 #

原配置中upstream client定义不完整，补充完整并优化/api转发规则：

upstream client {
  server client:3000;
}

upstream api {
  server api:3001;
}

server {
  listen 80;

  location / {
      proxy_pass http://client;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }

  location /sockjs-node {
      proxy_pass http://client;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
      proxy_set_header Host $host;
  }

  location /api {
      proxy_pass http://api;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

2. 修改React应用的API调用路径 #

在React代码中，所有API请求使用相对路径：

// 正确写法：浏览器自动拼接当前网站的域名/IP
fetch('/api/books')
  .then(res => res.json())
  .then(data => console.log(data))

用户浏览器会发起类似http://你的服务器IP/api/books的请求，Nginx自动转发到api:3001容器。

3. 确认Docker Compose配置有效性 #

你的docker-compose配置已满足要求：

• Nginx容器映射主机80端口，对外提供服务
• client和api容器仅通过expose暴露端口，仅Docker内部可访问
• Nginx可通过服务名（client、api）直接访问对应容器（Docker Compose默认创建内部网络，服务名可作为域名解析）

验证步骤 #

• 重启所有容器：docker-compose down && docker-compose up --build
• 访问服务器80端口，确认React应用正常加载
• 触发API请求后，查看浏览器开发者工具「网络」标签，确认请求路径为/api/xxx且返回正常

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