vite代理步骤原理

Vite 的 proxy 功能主要是为了解决前端开发阶段的 跨域问题，它通过将前端请求「代理」转发到后端服务器，从而绕过浏览器的同源策略限制。以下是它的工作原理详解：

🔧 基本配置

在 vite.config.ts 中配置 server.proxy：

export default defineConfig({
server: {
proxy: {
‘/api’: {
target: ‘http://localhost:3000’,
changeOrigin: true,
rewrite: path => path.replace(/^/api/, ‘’)
}
}
}
})

🔍 工作原理详解

1. 拦截请求

当你在前端代码中发出请求：

fetch(’/api/user’)

Vite 的开发服务器（基于 http-proxy）会监听所有请求。

2. 匹配路径规则

如果请求路径以 /api 开头，匹配到了配置项。

3. 转发请求

请求被 Vite 代理服务器拦截，并 转发到 target 指定的后端地址，例如转发成：

http://localhost:3000/user

4. changeOrigin 设置为 true

会将请求头中的 origin / host 改成目标地址对应的 origin，以避免被目标服务器拒绝（某些后端做了 origin 校验）。

5. rewrite 重写路径

把前缀 /api 去掉，后端实际不会看到 /api，而是看到 /user。

6. 接收响应

后端返回数据后，Vite 开发服务器将响应数据传回给浏览器，完成一次“伪装”的同源请求。

📌 为什么不直接请求后端？

因为开发阶段：

前端运行在 localhost:5173

后端运行在 localhost:3000

浏览器限制跨域请求（CORS 限制）

使用 proxy，相当于浏览器只请求 localhost:5173，Vite 作为中间人转发请求给后端，就 不会触发跨域问题。

✅ 优点

不需要在后端处理 CORS 请求头

本地开发方便，模拟线上接口

支持多个路径、多目标地址配置

🔒 注意事项

proxy 只在开发模式生效，打包后的生产环境请使用 Nginx 等方式做代理。

若接口中包含 WebSocket，需要设置 ws: true

若遇到 cookie 问题，需额外处理 cookieDomainRewrite 等参数

如需进一步理解，我可以举一个完整例子或帮你搭建一个可跑 demo。需要吗？