Docker容器网络问题：前端无法解析backend-flask服务名称求助

现象 #

• 前端调用后端API时返回错误：POST http://backend-flask:5000/search net::ERR_NAME_NOT_RESOLVED
• 将请求地址改为localhost:5000/search可正常工作
• 已确认所有容器处于同一Docker网络

相关配置文件 #

Docker Compose 配置 #

version: '3'

services:
  backend-flask:
    build: ./backend   

  frontend-fligh:
    build: ./frontend-fligh
    ports:
      - "3000:3000"
    depends_on:
      - backend-flask

前端API调用代码 #

const response = await fetch('http://backend-flask:5000/search', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(query)
                });

后端Flask路由配置 #

app = Flask(__name__)
CORS(app) #for production change to have only my site


@app.route('/search', methods=['POST'])
//more code

后端Dockerfile #

FROM python:3.8-alpine
WORKDIR /code
ENV FLASK_APP=app.py
ENV FLASK_RUN_HOST=0.0.0.0
ENV FLASK_ENV=development
ENV FLASK_DEBUG=1
RUN apk add --no-cache gcc musl-dev linux-headers
COPY requirements.txt requirements.txt
RUN pip install -r requirements.txt
COPY . .
CMD ["flask", "run"]

Docker网络与容器状态 #

网络检查结果 #

jasonwang@Jasons-MacBook-Pro startUp % docker network inspect startup_default
[
    {
        "Name": "startup_default",
        "Id": "f9507df9f26968c4665da09bf90b24904267b177476c3654197d4b9afbf1dd78",
        "Created": "2023-08-25T02:26:45.523880875Z",
        "Scope": "local",
        "Driver": "bridge",
        "EnableIPv6": false,
        "IPAM": {
            "Driver": "default",
            "Options": null,
            "Config": [
                {
                    "Subnet": "172.19.0.0/16",
                    "Gateway": "172.19.0.1"
                }
            ]
        },
        "Internal": false,
        "Attachable": false,
        "Ingress": false,
        "ConfigFrom": {
            "Network": ""
        },
        "ConfigOnly": false,
        "Containers": {
            "1278a785f11c2227638d12aba3c5286a29346134801b43481fcedc5d15037b12": {
                "Name": "startup-redis-1",
                "EndpointID": "cfaf2be033ce04fd9f7cdd5cba4d287d0d3a9ee77edd79324fe8b6dfd2a93ca6",
                "MacAddress": "02:42:ac:13:00:02",
                "IPv4Address": "172.19.0.2/16",
                "IPv6Address": ""
            },
            "5ca87c376d0342d67e07a2452f2ae188af710c65753894fdddda99bb05e0e902": {
                "Name": "startup-backend-flask-1",
                "EndpointID": "24bd57249b98e595b54846d5581655798730b3eb475624fe057599ad1f492b5c",
                "MacAddress": "02:42:ac:13:00:03",
                "IPv4Address": "172.19.0.3/16",
                "IPv6Address": ""
            },
            "6a968c8e2bad884cc56540cc43699dc51c479486693e60209add3e890e84d94c": {
                "Name": "startup-frontend-fligh-1",
                "EndpointID": "36598650abb0c25cde0da3442f587771a947f1c8b119f5455834b0d699fa82e1",
                "MacAddress": "02:42:ac:13:00:04",
                "IPv4Address": "172.19.0.4/16",
                "IPv6Address": ""
            }
        },
        "Options": {},
        "Labels": {
            "com.docker.compose.network": "default",
            "com.docker.compose.project": "startup",
            "com.docker.compose.version": "2.20.2"
        }
    }
]

容器运行状态 #

CONTAINER ID   IMAGE                    COMMAND                  CREATED             STATUS         PORTS                    NAMES
fa9c94681ab1   startup-frontend-fligh   "docker-entrypoint.s…"   48 minutes ago      Up 4 seconds   0.0.0.0:3000->3000/tcp   startup-frontend-fligh-1
66759928be0a   startup-backend-flask    "flask run"              48 minutes ago      Up 5 seconds                            startup-backend-flask-1
1278a785f11c   redis:alpine             "docker-entrypoint.s…"   About an hour ago   Up 5 seconds   6379/tcp                 startup-redis-1

问题原因与解决方案 #

核心原因 #

前端代码在浏览器环境中执行，而非前端容器内部。浏览器属于宿主机网络，无法直接解析Docker Compose创建的内部服务域名（backend-flask），只有容器之间才能通过服务名互相访问。

解决方案 #

方案1：映射后端端口到宿主机

修改docker-compose.yml，给backend-flask添加端口映射：

services:
  backend-flask:
    build: ./backend
    ports:
      - "5000:5000"  # 新增端口映射

前端代码保持使用http://localhost:5000/search即可访问。

方案2：配置前端代理（推荐）

在前端项目中设置代理，将API请求转发到后端服务。以React项目为例：

• 在package.json中添加：

  "proxy": "http://backend-flask:5000"
  

• 前端代码改为相对路径请求：

  const response = await fetch('/search', {
                      method: 'POST',
                      headers: {
                          'Content-Type': 'application/json'
                      },
                      body: JSON.stringify(query)
                  });
  

前端开发服务器会自动将请求转发到后端容器，同时浏览器能正常解析相对路径。

方案3：宿主机hosts映射（不推荐）

在宿主机/etc/hosts（Linux/macOS）或C:\Windows\System32\drivers\etc\hosts（Windows）中添加：

172.19.0.3 backend-flask

但该方法依赖后端容器固定IP，容器重启后IP可能变化，维护成本高。

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