Docker容器内Create-React-App的fetch请求无法找到服务器问题排查

核心原因是浏览器运行在宿主机网络环境，而非Docker内部网络，所以无法识别Docker Compose定义的api-admin服务域名——只有Docker容器之间才能通过服务名互相访问，浏览器不行。

解决办法 #

方法1：用Create-React-App的代理配置（开发/生产通用思路） #

在项目根目录的package.json中添加代理配置：

"proxy": "http://api-admin:3000/v1"

然后前端代码中改用相对路径发起请求：

const req = new Request(
    '/login', {
    method: 'POST',
    body: formData
})
return fetch(req).then(processResp, processErr);

• 开发时：CRA会自动将前端请求代理到目标API服务，避开跨域和域名解析问题。
• 生产部署时：需要用Nginx这类反向代理工具，将前端容器的API请求转发到api-admin:3000/v1（参考方法2）。

方法2：Nginx反向代理（生产部署推荐） #

把React打包后的静态文件部署到Nginx容器中，修改Nginx配置文件，添加反向代理规则：

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

    # 匹配API请求，转发到api-admin服务
    location /v1/ {
        proxy_pass http://api-admin:3000/v1/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

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

前端代码中使用相对路径/v1/login发起请求，Nginx会自动将请求转发到Docker内部的API服务。

方法3：宿主机端口映射（仅测试用） #

在docker-compose.yml中给api-admin服务映射宿主机端口：

services:
  api-admin:
    ports:
      - "3000:3000"

然后前端将apiAdminUrl设置为http://localhost:3000/v1（或宿主机IP+端口）。这种方式适合本地测试，但生产环境不推荐，会暴露服务端口且依赖宿主机网络。

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