Vite 的 proxy 功能主要是为了解决前端开发阶段的 跨域问题，它通过将前端请求「代理」转发到后端服务器，从而绕过浏览器的同源策略限制。以下是它的工作原理详解：
🔧 基本配置
在 vite.config.ts 中配置 server.proxy：
export default defineConfig({
server: {
proxy: {
‘/api’: {
target: ‘http://localhost:3000’,
changeOrigin: true,
rewrite: path => path.replace(/^/api/, ‘’)
}
}
}
})
🔍 工作原理详解
- 拦截请求
当你在前端代码中发出请求：
fetch(’/api/user’)
Vite 的开发服务器（基于 http-proxy）会监听所有请求。
- 匹配路径规则
如果请求路径以 /api 开头，匹配到了配置项。
- 转发请求
请求被 Vite 代理服务器拦截，并 转发到 target 指定的后端地址，例如转发成：
http://localhost:3000/user
- changeOrigin 设置为 true
会将请求头中的 origin / host 改成目标地址对应的 origin，以避免被目标服务器拒绝（某些后端做了 origin 校验）。
- rewrite 重写路径
把前缀 /api 去掉，后端实际不会看到 /api，而是看到 /user。
- 接收响应
后端返回数据后，Vite 开发服务器将响应数据传回给浏览器，完成一次“伪装”的同源请求。
📌 为什么不直接请求后端？
因为开发阶段：
前端运行在 localhost:5173
后端运行在 localhost:3000
浏览器限制跨域请求（CORS 限制）
使用 proxy，相当于浏览器只请求 localhost:5173，Vite 作为中间人转发请求给后端，就 不会触发跨域问题。
✅ 优点
不需要在后端处理 CORS 请求头
本地开发方便，模拟线上接口
支持多个路径、多目标地址配置
🔒 注意事项
proxy 只在开发模式生效，打包后的生产环境请使用 Nginx 等方式做代理。
若接口中包含 WebSocket，需要设置 ws: true
若遇到 cookie 问题，需额外处理 cookieDomainRewrite 等参数
如需进一步理解，我可以举一个完整例子或帮你搭建一个可跑 demo。需要吗？