Docker环境下Cypress容器无法访问Webpack打包的React前端容器

以下是按优先级排列的排查和修复步骤：

1. 确保前端服务监听正确的地址 #

Webpack Dev Server默认只监听localhost，容器内的localhost仅对自身可见，必须配置为监听0.0.0.0才能让同网络的其他容器访问：
修改webpack.config.js的devServer配置：

devServer: {
  host: '0.0.0.0',
  port: 3000, // 确保和容器内服务端口一致
  allowedHosts: 'all', // 禁用host校验，避免容器hostname被拦截
  hot: true // 可选，不影响网络访问
}

查看前端容器日志，确认输出类似Project is running at http://0.0.0.0:3000，说明服务已正确监听。

2. 检查Docker Compose的服务地址配置 #

Cypress容器必须使用Docker Compose的服务名称访问前端，不能用0.0.0.0或localhost：

• 假设前端服务在docker-compose.yml中名为frontend，则Cypress的访问地址应为http://frontend:3000
• 在Cypress配置文件（cypress.config.js）中设置baseUrl：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://frontend:3000',
    // ...其他配置
  },
});

或者在Cypress容器的环境变量中指定：

cypress:
  environment:
    - CYPRESS_BASE_URL=http://frontend:3000

3. 验证容器间的网络连通性 #

直接进入Cypress容器测试网络连通性，排除代码问题：

# 进入Cypress容器
docker exec -it <cypress-container-name> sh
# 测试访问前端服务
curl http://frontend:3000

• 如果curl返回前端HTML内容，说明网络正常，问题出在Cypress测试代码或配置
• 如果curl失败，检查前端容器是否正常运行：docker ps，确认状态为Up
• 进入前端容器，检查端口监听情况（需先安装net-tools）：

docker exec -it <frontend-container-name> apt-get update && apt-get install -y net-tools
netstat -tulpn | grep 3000

确保输出显示0.0.0.0:3000而不是127.0.0.1:3000

4. 确保前端服务完全启动后再运行Cypress #

depends_on仅会等待容器启动，不会等待服务就绪，需添加健康检查确保前端服务可用：
修改docker-compose.yml中的前端服务配置：

frontend:
  build: ./frontend
  healthcheck:
    test: ["CMD", "curl", "-f", "http://localhost:3000"] # 检查服务是否响应
    interval: 5s
    timeout: 5s
    retries: 5
  # ...其他配置

cypress:
  # ...其他配置
  depends_on:
    frontend:
      condition: service_healthy # 等待前端服务健康检查通过

5. 检查Docker网络配置 #

默认情况下，Docker Compose会为所有服务创建一个共享网络，无需手动配置。如果手动指定了网络，确保两个服务都加入同一个网络：

networks:
  test-network:
    driver: bridge

services:
  frontend:
    networks:
      - test-network
  cypress:
    networks:
      - test-network

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