React与Spring Boot容器同网络通信问题及优化方案咨询

出现net::ERR_NAME_NOT_RESOLVED的核心原因是：React应用实际在用户的浏览器中运行，而非Docker容器内部。浏览器只能识别主机系统的DNS记录，无法解析Docker Compose内部网络的服务名（my-service），所以找不到这个地址。

下面是针对性的解决方法：

方法1：端口映射+本地回环地址（快速调试） #

• 修改前端API请求地址为http://localhost:8080，同时更新后端CORS配置，允许http://localhost:3000访问
• 在Docker Compose中给两个容器添加端口映射，让主机可以直接访问：

services:
  my-service:
    image: your-spring-boot-image
    ports:
      - "8080:8080" # 主机端口:容器端口
  my-client:
    image: your-react-image
    ports:
      - "3000:3000"

方法2：Nginx反向代理（生产环境首选） #

通过Nginx作为统一入口，消除跨域和DNS解析问题：

1. 新增Nginx服务，与前端、后端容器处于同一Docker网络
2. 配置Nginx转发规则，将/api开头的请求转发给后端服务，其他请求转发给前端：

server {
  listen 80;

  location / {
    proxy_pass http://my-client:3000;
  }

  location /api {
    proxy_pass http://my-service:8080/api;
  }
}

3. 前端API请求改用相对路径/api/auth/login，无需硬编码域名
4. 后端可关闭CORS（因为请求都通过Nginx转发，属于同源访问），或仅允许Nginx的地址

方法3：React开发服务器代理（开发环境专属） #

利用React内置的代理功能，让开发服务器转发API请求：

• 方式1：在package.json中添加代理配置：

"proxy": "http://my-service:8080"

• 方式2：创建src/setupProxy.js实现更灵活的规则：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://my-service:8080',
      changeOrigin: true,
    })
  );
};

配置后，前端请求/api/auth/login会被开发服务器转发到后端，浏览器端不会出现跨域和DNS解析问题

• 开发环境：优先使用React内置代理或端口映射+localhost，快速搭建调试环境，无需复杂配置
• 生产环境：必须使用反向代理（Nginx/Traefik等），统一管理服务入口，避免直接暴露容器端口，同时天然解决跨域问题，还可扩展HTTPS、负载均衡等能力
• 动态配置API地址：前端避免硬编码API地址，使用环境变量（如REACT_APP_API_URL）注入，方便在开发、测试、生产环境切换
• Docker网络规范：确保所有服务处于同一Docker网络（Compose默认会自动创建），容器间通信可直接使用服务名，这仅适用于容器内部的服务调用，与前端浏览器无关
• CORS配置优化：生产环境用反向代理后，尽量关闭不必要的CORS规则；开发环境可临时放宽，但不要将开发环境的CORS配置带到生产

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