前端调用容器化后端出现Unknown host错误，为何Docker服务名无效？

核心原因 #

前端代码是在用户的浏览器中执行，而非运行在frontend容器内部。Docker Compose创建的内部网络DNS解析仅对容器之间的通信生效，浏览器的网络请求来自用户本地网络，完全不在Docker的内部网络环境中，因此无法识别backend这个服务名，导致NS_ERROR_UNKNOWN_HOST错误。

简单总结：

• 容器之间互相访问时，Docker内部DNS能把服务名转换成容器IP；
• 浏览器发起的请求走用户本地DNS系统，该系统不知道backend对应的地址，自然解析失败。

解决方案 #

1. 开发环境：使用主机端口映射+localhost

你已经把后端5000端口映射到主机8002端口，前端可以直接请求主机端口：

fetch('http://localhost:8002/hello')

注意：此时会触发跨域请求（CORS），需要在后端配置允许前端所在域名（如http://localhost:8001）的跨域访问。

2. 生产环境：用反向代理统一域名

通过反向代理（如Nginx）将前后端请求统一到同一个域名下，避免跨域和服务名解析问题。修改Compose文件添加Nginx服务：

version: '3.8'
services:
  frontend:
    build: ./frontend
  backend:
    build: ./backend
  nginx:
    image: nginx:alpine
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    ports: ['8000:80']

创建nginx.conf配置文件，转发页面和API请求到对应服务：

server {
  listen 80;

  # 转发前端页面请求
  location / {
    proxy_pass http://frontend;
  }

  # 转发API请求到后端
  location /api/ {
    proxy_pass http://backend:5000/;
  }
}

此时前端只需请求相对路径：

fetch('/api/hello')

3. 动态配置API地址（通用方案）

在前端构建时注入环境变量，根据开发/生产环境动态设置API地址，避免硬编码。比如在Vite项目中通过.env文件配置：

• 开发环境.env.development：VITE_API_URL=http://localhost:8002
• 生产环境.env.production：VITE_API_URL=/api

前端代码中使用环境变量：

fetch(`${import.meta.env.VITE_API_URL}/hello`)

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