Docker容器通信异常：前端浏览器无法调用后端API

核心原因 #

容器内部用curl http://backend:8000能正常访问，是因为Docker内部DNS服务会把服务名backend解析成对应容器的IP。但浏览器运行在宿主机网络环境中，无法识别Docker内部的服务名，所以触发ERR_NAME_NOT_RESOLVED错误；用localhost失败则大概率是跨域（CORS）限制导致。

解决方案步骤 #

1. 修正前端暴露给浏览器的后端地址

前端的NEXT_PUBLIC_BACKEND_URL是直接传给浏览器的配置，不能用Docker内部服务名，必须替换成宿主机可访问的地址：

• 本地开发：改成http://localhost:8000
• 服务器部署：改成宿主机公网IP/域名 + 8000端口

修改docker-compose.yml中前端的环境变量：

environment:
  # ... 其他变量保持不变
  NEXT_PUBLIC_BACKEND_URL: http://localhost:8000  # 替换原http://backend:8000

2. 配置Django后端允许跨域请求

前端运行在localhost:3000，后端在localhost:8000属于跨域场景，需在Django中开启CORS支持：

• 安装依赖：

  pip install django-cors-headers
  

• 修改Django项目的settings.py：

  # 添加到INSTALLED_APPS
  INSTALLED_APPS = [
      # ... 已有应用
      'corsheaders',
  ]
  
  # 添加中间件（需放在CommonMiddleware之前）
  MIDDLEWARE = [
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      # ... 其他中间件
  ]
  
  # 允许前端域名跨域访问
  CORS_ALLOWED_ORIGINS = [
      "http://localhost:3000",
  ]
  
  # 开发环境可临时允许所有来源（生产环境禁用）
  # CORS_ALLOW_ALL_ORIGINS = True
  

3. 验证后端服务的可访问性

在宿主机浏览器直接访问http://localhost:8000/users/abhishek，确认后端API能正常响应。如果无法访问：

• 查看后端容器日志：docker-compose logs backend排查启动错误
• 检查端口映射：netstat -tulpn | grep 8000确认宿主机8000端口被监听

4. 重启容器生效配置

修改完成后重启所有容器：

docker-compose down && docker-compose up --build

额外说明 #

• Docker服务名（如backend）仅在容器内部的Docker网络中有效，不能直接暴露给外部（包括浏览器）使用。
• 生产环境建议用Nginx等反向代理统一管理前后端访问，既避免跨域问题，也能隐藏内部服务细节。

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