无需反向代理：用 Vite 代理直接调试 Vue + Golang 前后端分离项目

前言

当我们开发 Vue + Golang 的前后端分离项目时，前端跑在 http://localhost:5173 ，后端跑在 http://localhost:8080 —— 两者存在跨域的问题。

我的第一反应是：加个 CORS 就行了，试了之后发现不行。

于是我改成本地部署 Nginx 反向代理，虽然不好配，但是能用。但是一段时间不用就有忘记了。或者换个项目还得来一次

每次改前端代码，都要 npm run build 才能验证修改

我其实就是想要热重载 + 实时接口调试？

本文讲如何在 不搭建额外代理服务 的前提下，让 Vue 的开发服务器自动帮你把 API 请求转发到 Golang 后端 —— 实现*零配置、热重载、真调试。

本地调试

找到 vite.config.ts 增加如下代理

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


export default defineConfig({
 server: {
   proxy: {
     '/api': {
       target: 'http://localhost:8080',
       changeOrigin: true,
       secure: false,
     },
   },
 },
});

这样请求到 api 的路由就会被转发到 http://localhost:8080 ，也就是 Golang 的地址。不用改前端代码里的接口地址

不用处理 CORS

不用重启服务

改完代码，Ctrl+S，页面自动刷新，接口直接通

其实 Vite 在开发模式下会启动一个内置的 Node.js 服务器，它本身就能拦截请求并转发。

所以你不需要 Nginx，这个代理只在开发环境生效，不影响生产构建，真正做到“开发顺手，上线无痕”。

Vite 还是挺方便的，后悔没有早点知道。

Contents

前言

本地调试