Docker Compose容器无法访问问题：最简示例求助

根据Docker Compose文档说明：

每个服务的容器都会加入默认网络，该网络中的其他容器既可以访问它，也可以通过与容器名称相同的主机名发现它。

但按此配置的极简应用无法正常运行：点击前端按钮调用http://backend/时，浏览器报错GET http://backend/ net::ERR_NAME_NOT_RESOLVED。

问题根源 #

你混淆了容器内网络访问和浏览器端网络访问的场景：

• Docker Compose的默认网络仅作用于容器之间，容器可以通过服务名（比如backend）互相访问。
• 但前端的JavaScript代码是在用户的浏览器中执行的，浏览器属于宿主机网络，不在Docker的默认网络里，因此无法解析backend这个仅在Docker网络内有效的主机名。

解决方案 #

最可靠的方式是通过Nginx反向代理，让前端的请求先发给Nginx容器，再由Nginx转发到后端容器（此时Nginx在Docker网络内，可以解析backend）。

步骤1：修改Nginx配置

在frontend目录下创建nginx.conf文件，添加反向代理规则：

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # 所有/api开头的请求转发到backend容器
    location /api/ {
        proxy_pass http://backend/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 处理单页应用路由（可选，适配前端路由场景）
    location / {
        try_files $uri $uri/ /index.html;
    }
}

步骤2：更新Docker Compose配置

修改compose.yaml，让Nginx容器挂载自定义配置文件替换默认配置：

services:
  backend:
    build: ./backend/.
    ports:
      - "80"
  frontend:
    image: nginx:latest
    volumes:
      - ./frontend:/usr/share/nginx/html
      - ./frontend/nginx.conf:/etc/nginx/conf.d/default.conf  # 挂载自定义配置
    ports:
      - "8002:80"

步骤3：修改前端请求路径

把frontend/src/main.ts中的请求地址改为相对路径：

async function btn(): Promise<void> {
    console.log("Button clicked")
    const content = await (await fetch("/api/")).json()  // 改为/api/
    console.log(content)
}

document.getElementById("btn")!.addEventListener("click", btn);

其他可选方案

• 直接映射后端端口到宿主机：在compose.yaml中给backend添加端口映射，比如- "8001:80"，然后前端请求http://localhost:8001/。但这种方式依赖宿主机端口，生产环境不推荐暴露后端端口。
• 使用Docker主机网络：给前端容器添加network_mode: host，但会破坏容器隔离性，仅适合临时测试。

验证 #

重新启动服务：

docker compose up --build

访问http://localhost:8002，点击按钮即可正常获取后端返回数据。

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