Docker Compose环境下Angular CLI代理无法连接Django后端

核心问题分析 #

从错误信息和配置来看，主要存在两个关键问题：

• Angular开发服务器未正确加载代理配置文件，导致请求被代理到错误的目标地址（http://api:8000而非配置的http://django:8000）
• 需要确保前后端服务处于同一个Docker网络，保证容器间能通过服务名正常通信

具体修复步骤 #

1. 让Angular启动时加载代理配置 #

你的前端Dockerfile启动命令未指定代理配置文件，导致proxy.conf.json未生效。修改Dockerfile的启动命令：

CMD ["ng", "serve", "--host", "0.0.0.0", "--proxy-config", "proxy.conf.json"]

确保proxy.conf.json被复制到了容器内的工作目录（当前Dockerfile的工作目录是/project）。

2. 显式配置Docker网络（可选但推荐） #

虽然使用include会让所有服务默认加入同一个网络，但显式声明网络可避免潜在的隔离问题。修改根目录的docker-compose.yml：

version: '3.7'

networks:
  app-network:
    driver: bridge

include:
  - ./frontend/compose.yml
  - ./backend/local.yml

分别修改前后端的compose文件，将服务加入这个网络：

前端compose.yml：

services:
  web:
    build:
      context: .
      target: builder
    ports:
      - 4200:4200
    volumes:
      - ./angular:/app
      - /project/node_modules
    networks:
      - app-network

后端local.yml：

services:
  django:
    # 其他原有配置保持不变
    networks:
      - app-network
  postgres:
    # 其他原有配置保持不变
    networks:
      - app-network
  docs:
    # 其他原有配置保持不变
    networks:
      - app-network

3. 确认代理目标地址正确性 #

确保proxy.conf.json中的目标地址与后端服务名一致（即django）：

{
    "/api/*": {
      "target": "http://django:8000/",
      "secure": false,
      "changeOrigin": true
    }
}

4. 验证容器间通信 #

重启所有服务后，进入前端容器测试是否能访问后端API：

# 进入前端容器（替换为你的前端容器名或ID）
docker exec -it <frontend-container-name> bash

# 在容器内发起API请求测试
curl http://django:8000/api/project_types/

如果能正常返回数据，说明网络通信正常，问题已解决；如果仍无法访问，检查后端服务是否正常启动，或网络配置是否正确。

额外注意事项 #

• 确保后端Django的ALLOWED_HOSTS包含django或*（开发环境下），避免拒绝来自前端容器的请求
• 检查前端容器的卷挂载配置，确保proxy.conf.json被正确同步到容器内

内容的提问来源于stack exchange，提问作者Kevin B.