MacOS系统Docker化React Web应用无法连接前端的解决方法咨询

核心原因 #

MacOS 版本的 Docker 底层依赖 Linux 虚拟机运行，不原生支持 network_mode: host 配置。你在配置中给前端等服务开启了host网络模式，实际端口只会绑定到Docker内置的虚拟机网络，不会暴露到Mac本机的网络栈，所以无法通过localhost:8000访问，而原生Linux系统支持host网络所以Ubuntu虚拟机里运行正常。

解决方案 #

方案1：改用端口映射模式（最推荐，兼容性最好） #

1. 删掉docker-compose.yaml中所有服务的network_mode: "host"配置行
2. 给需要对外暴露的服务添加端口映射规则：

services:
  frontend:
    # 删掉原来的network_mode: "host"
    build:
      context: ./frontend
    ports:
      - "8000:8000" # 本机8000端口映射到容器内8000端口
    # 其余原有配置保留
  backend:
    # 删掉原来的network_mode: "host"
    build:
      context: ./backend
    ports:
      - "8080:8080"
    # 其余原有配置保留
  # 其余服务如果需要对外访问，同理添加对应端口映射即可，不需要对外的不用加，Docker内部网络默认可以通过服务名互相通信

3. 检查前端镜像内的nginx配置default.conf，确认nginx监听端口为8000，避免出现EXPOSE和实际监听端口不一致的问题
4. 重新执行命令启动服务：
   docker-compose down && docker-compose up --build

方案2：保留host网络直接访问Docker虚拟机IP #

如果因为业务依赖（比如Kurento流媒体服务需要host网络）不能修改网络模式，可以直接访问Docker内置虚拟机的对应IP：

1. 执行命令获取前端容器的IP地址：
   docker inspect p_frontend | grep IPAddress
2. 用拿到的IP替换localhost访问：http://<虚拟机IP>:8000
   注意：该IP会在Docker服务重启后变动，不适合长期使用

其他排查要点 #

• 检查Mac本机8000端口是否被其他进程占用：执行lsof -i :8000如果有返回结果，说明端口被占用，要么关闭占用进程，要么修改端口映射为其他未占用端口
• 确认前端容器运行正常：执行docker ps看p_frontend容器是否是运行状态，执行docker logs p_frontend查看是否有报错信息

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