Docker部署后React前端无法连接Flask后端求助

核心原因 #

前端容器内的localhost:5000指向容器自身，而非后端容器，导致请求被拒绝。Docker Compose默认会为所有服务创建共享网络，服务间可通过服务名直接通信。

具体修复步骤 #

1. 修改前端API请求/代理配置 #

• 若请求代码中写死了地址：将所有http://localhost:5000替换为http://backend:5000（backend是docker-compose.yml中后端服务的名称）。
• 若使用Create React App的代理：
  • 在package.json中修改proxy字段：

    "proxy": "http://backend:5000"
    

  • 若使用setupProxy.js，调整target参数：

    const { createProxyMiddleware } = require('http-proxy-middleware');
    module.exports = function(app) {
      app.use(
        '/api',
        createProxyMiddleware({
          target: 'http://backend:5000',
          changeOrigin: true,
        })
      );
    };
    

2. 确保后端服务绑定到0.0.0.0 #

Flask默认仅绑定127.0.0.1，容器内部的127.0.0.1无法被其他容器访问。需修改后端启动方式：

• 在app.py中调整启动代码：

  if __name__ == '__main__':
      app.run(host='0.0.0.0', port=5000)
  

• 或在后端Dockerfile的CMD中添加--host=0.0.0.0：

  CMD ["python3", "src/api/app.py", "--host=0.0.0.0"]
  

3. 验证Docker Compose网络（可选） #

默认情况下Docker Compose会自动创建共享网络，无需额外配置。若自定义了网络，需确保front和backend服务在同一网络中：

version: '3.9'
services:
  front:
    # ... 其他配置
    networks:
      - app-network
  backend:
    # ... 其他配置
    networks:
      - app-network
networks:
  app-network:
    driver: bridge

验证修复 #

重新构建并启动服务：

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

此时前端容器内的请求会通过服务名backend正确路由到后端容器。

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