Last updated on

前端反向代理解决后端端口访问限制问题总结

1. 问题背景 (Problem Background)

架构描述

- 前端架构: Vue 3 + Vite 开发服务器

- 后端架构: Python Flask API 服务

- 部署环境: Linux 服务器 (Remote Server)

网络约束 (Network Constraints)

- 开放端口: 仅 20201 (用于前端服务访问)。

- 受限端口: 5000 (后端 API 端口)，防火墙策略未对公网/局域网开放，仅允许服务器本地 (localhost/127.0.0.1) 访问。

遇到的问题

前端代码运行在客户端浏览器中。当代码尝试直接发起 HTTP 请求至 http://<服务器IP>:5000/api/report 时，由于服务器防火墙拦截了对 5000 端口的外部连接，导致请求超时或连接被拒绝 (Connection Refused/Timeout)，前端无法获取数据。

2. 解决方案 (Solution)

采用 反向代理 (Reverse Proxy) 模式。利用已开放的 20201 端口作为统一入口，由运行在服务器上的 Vite 开发服务器充当“中转站”，将特定路径（如 /api）的请求转发给本机的后端服务。

核心机制

浏览器不再直接通过 TCP/IP 连接后端端口，而是将请求发送给前端服务器，再由前端服务器通过内部回环网络 (Loopback Interface) 转发给后端。

流量拓扑图 (Traffic Topology)

修改前 (直连模式 - 失败):

graph LR
    Browser[浏览器 (客户端)] --X 1. 请求 http://IP:5000 (被防火墙拦截) X--> Firewall[服务器防火墙]
    Firewall --|阻断|--> Backend[后端 Flask (5000)]

修改后 (反向代理模式 - 成功):

graph LR
    Browser[浏览器 (客户端)] -->|1. 请求 http://IP:20201/api/xxx| Vite[Vite Server (20201)]
    subgraph Server [Linux 服务器内部]
        Vite -->|2. 内部转发 http://localhost:5000/api/xxx| Backend[后端 Flask (5000)]
        Backend -->|3. 返回数据| Vite
    end
    Vite -->|4. 响应数据| Browser

3. 实施步骤 (Implementation Steps)

步骤一：配置 Vite 反向代理

修改 frontend/vite.config.js，拦截 /api 开头的请求并转发到本地 5000 端口。

文件: frontend/vite.config.js

export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 20201, // 前端对外暴露端口
    proxy: {
      // 匹配规则：以 /api 开头的路径
      '/api': {
        target: 'http://localhost:5000', // 转发目标：本机后端
        changeOrigin: true, // 修改 Host 头，伪装成后端同域请求
        // rewrite: (path) => path.replace(/^\/api/, '') // (可选) 若后端不包含 /api 前缀则需重写
      }
    }
  }
})

步骤二：修改前端请求路径

将前端代码中的绝对路径（包含 IP 和端口）改为 相对路径。浏览器会自动使用当前页面的域名和端口（即 20201）发起请求，从而触发 Vite 的代理规则。

文件: frontend/src/App.vue

// 修改前 (直连，失败)
// const response = await axios.post('http://192.168.2.230:5000/api/report', ...)


// 修改后 (走代理，成功)
const response = await axios.post('/api/report', ...)

4. 关键概念辨析 (Key Concepts)

**反向代理 (Reverse Proxy) vs 跨域 (CORS)

特性反向代理 (Vite Proxy / Nginx)跨域资源共享 (CORS)
生效位置服务端 (Vite Server / Nginx)浏览器 (安全策略)
解决痛点1. 绕过端口/防火墙限制 (本案核心)
2. 隐藏后端真实架构
3. 规避同源策略		1. 允许浏览器跨域访问资源
2. 仅在网络连通但域名不同时有效
本案作用决定性作用。建立了一条浏览器通往后端的物理通道。辅助/失效。由于物理网络不通，CORS 配置本身无法解决连接问题。但在代理生效后，CORS 可作为后端的二道防线。

5. 结论

通过配置 Vite 的 server.proxy，我们将“前端请求后端”的跨网络访问问题，转化为“前端服务器请求后端服务器”的本地进程间通信 (IPC/Loopback) 问题，成功绕过了服务器防火墙对 5000 端口的入站限制。