Docker Compose中React与Flask服务无法互访（连接被拒绝）求助

核心原因 #

Flask默认启动时仅监听127.0.0.1（容器内部回环地址），导致同一Docker网络内的其他容器、宿主机都无法访问后端服务。这直接引发：

• 后端容器内curl localhost:5000正常，但前端容器curl backend:5000被拒绝连接
• 宿主机通过映射端口5005请求时，得到空响应（Flask未监听容器外部IP）

修复步骤 #

1. 修改Flask启动监听地址 #

将Flask启动命令改为监听0.0.0.0，让容器开放所有网络接口：

方式一：修改后端Dockerfile

# 替换原CMD行
CMD ["python3", "-m", "flask", "run", "--host=0.0.0.0"]

方式二：在docker-compose.yml中添加环境变量

backend:
  build: ./backend
  environment:
    - FLASK_ENV=production
    - FLASK_RUN_HOST=0.0.0.0  # 新增该行
  ports:
    - "5005:5000"
  networks:
    - my-network

2. 验证修复效果 #

执行以下命令重启容器：

docker-compose down && docker-compose up --build

然后分别验证：

• 前端容器内执行curl backend:5000/test，应返回正常健康响应
• 宿主机执行curl localhost:5005/test，也能获取健康信息

额外优化建议 #

• 前端避免硬编码后端地址，改用环境变量：
  若使用create-react-app，需将环境变量命名为REACT_APP_前缀，修改docker-compose.yml：

  frontend:
    environment:
      - REACT_APP_BACKEND_URL=http://backend:5000
  

  前端代码中调用：

  axios.post(`${process.env.REACT_APP_BACKEND_URL}/deletecode`, {
    'uuid': uuid,
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  

• 添加健康检查确保后端服务就绪：

  backend:
    # ...原有配置
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:5000/test"]
      interval: 5s
      timeout: 5s
      retries: 3
  frontend:
    # ...原有配置
    depends_on:
      backend:
        condition: service_healthy
  

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