VM中CTF前后端跨IP请求问题：能否通过Nginx解决？

方案一：用Nginx统一代理（推荐） #

完全可以通过Nginx解决，不用改前端代码也不用处理IP变化问题。给现有Nginx配置新增一个location规则，把前端对后端的请求转发到本地5000端口：

listen 80 default_server;
listen [::]:80 default_server;

# 前端页面代理
location / {
      proxy_pass http://localhost:3000; 
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection 'upgrade';
      proxy_set_header Host $host;
      proxy_cache_bypass $http_upgrade;
}

# 后端API代理
location /api/ {
      proxy_pass http://localhost:5000/; # 末尾斜杠需保留，避免路径拼接错误
      proxy_set_header Host $host;
}

接着修改前端的fetch请求，直接用相对路径访问：

fetch("/api/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })

这样不管VM分配的私有IP是什么，前端都通过当前域名的/api路径请求后端，Nginx自动转发到5000端口，完全不用关心IP变动。

方案二：VM启动时获取私有IP注入前端 #

如果不想调整Nginx配置，也可以在VM启动时获取自身私有IP，将其作为环境变量注入React项目。

以Linux系统为例，在VM启动脚本中先获取私有IP：

PRIVATE_IP=$(hostname -I | awk '{print $1}')

启动React项目时传入该环境变量：

REACT_APP_BACKEND_IP=$PRIVATE_IP npm start

最后修改前端代码，用环境变量拼接请求地址：

fetch(`http://${process.env.REACT_APP_BACKEND_IP}:5000/login`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })

这种方法需要维护VM启动时的IP获取逻辑，相比Nginx方案，后续维护成本更高一些。

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