前端+NGINX无法请求后端接口（两个独立Docker容器）

核心问题 #

前端容器内发起的http://127.0.0.1:8000/api/token/请求，实际指向的是前端容器自身的localhost，而非宿主机或Django容器；同时NGINX配置缺少后端API的转发规则，导致请求无法到达Django服务。

解决方案步骤 #

1. 统一Docker网络 #

容器间需要在同一个网络下才能通过服务名/容器名通信：

• 先创建自定义网络：

docker network create app-network

• 修改前端/NGINX的docker-compose.yml，加入网络配置：

version: '3'

services:
  my_app:
    container_name: my_app-frontend
    restart: always
    build: ./my_app
    ports:
      - "8080:8080"
    command: gunicorn -w 2 -b :8080 app:server
    env_file:
      - ./my_app/.env
    networks:
      - app-network

  nginx:
    container_name: nginx
    restart: always
    build: ./nginx
    ports:
      - "80:80"
    depends_on:
      - my_app
    networks:
      - app-network

networks:
  app-network:
    external: true

• 将Django容器也加入app-network网络（修改Django的启动命令或docker-compose.yml）。

2. 更新NGINX配置，添加API代理规则 #

修改project.conf，新增/api路径的转发规则，指向Django容器：

server {
    listen 80;
    server_name docker_flask_gunicorn_nginx;

    # 代理前端应用
    location / {
        proxy_pass http://my_app:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 代理后端API请求
    location /api/ {
        proxy_pass http://django-backend:8000/api/; # 替换为你的Django容器名/服务名
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /static {
        rewrite ^/static(.*) /$1 break;
        root /static;
    }
}

3. 调整前端API请求地址 #

将前端代码中的API地址改为相对路径（如/api/token/），或指向NGINX的地址（如http://localhost/api/token/），确保请求先发送到NGINX再转发到Django。

4. 验证与重启 #

• 进入前端容器，测试网络连通性：

docker exec -it my_app-frontend ping django-backend

• 重启容器使配置生效：

docker-compose down && docker-compose up -d

额外排查点 #

• 确认Django容器内部8000端口正常监听，无防火墙拦截。
• 检查Django的ALLOWED_HOSTS配置，需包含NGINX服务名或宿主机IP，避免403错误。

内容的提问来源于stack exchange，提问作者Jack Power