公有EC2部署Nginx+Vue调用私有EC2中Django API失败排查

1. 核心问题定位 #

你遇到的超时问题本质是浏览器请求路径错误：前端从用户本地发起API请求，直接指向私有EC2，但私有EC2默认不对外开放公网访问；而WS服务器和私有EC2在同一VPC内网，curl能通是因为内网权限，浏览器的公网请求根本到不了私有实例。

2. 正确解决方案：Nginx反向代理 #

让WS服务器上的Nginx作为中间层，接收前端的API请求，再转发到私有EC2的Django服务，这是符合私有实例安全设计的标准方案。

修改Nginx配置 #

编辑你的Nginx站点配置文件，添加API转发规则：

server {
    listen 80;
    server_name 你的公网域名或EC2公网IP;

    # 处理Vue静态文件（保留你原有的配置）
    location / {
        root /path/to/your/vue/dist;
        try_files $uri $uri/ /index.html;
    }

    # 新增：转发API请求到私有EC2
    location /api/ {
        # 替换为私有EC2的内网IP和Django服务端口（比如8000）
        proxy_pass http://10.0.x.x:8000/;
        # 传递必要的请求头，避免Django出现CSRF或主机头错误
        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;
    }
}

• 关键：私有EC2的安全组必须允许WS服务器的内网IP访问Django端口（比如8000），否则Nginx转发的请求会被拦截。

3. 调整Vue的Axios配置 #

修改Vue项目中Axios的基础路径，让请求指向WS服务器的/api路径，而不是直接指向私有EC2：

// 比如在src/main.js或专门的axios配置文件中
import axios from 'axios';
axios.defaults.baseURL = '/api'; // 这样请求会自动拼接成 /api/xxx

4. 验证步骤 #

1. 重启Nginx：sudo systemctl restart nginx
2. 在WS服务器上测试转发：curl http://localhost/api/你的接口路径，确认能返回正常响应
3. 刷新前端页面，测试按钮请求，此时浏览器的请求会先到WS服务器，再由Nginx转发到私有Django，不会再出现超时

5. 额外检查项 #

• 确认Docker中的Django服务绑定的是0.0.0.0，而不是127.0.0.1，否则私有EC2的内网IP无法访问容器内的服务
• 检查VPC路由表，确保WS服务器和私有EC2在同一内网段且路由连通

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