vite 通过 server.proxy 在开发阶段反向代理请求以绕过同源策略，配置需写在 vite.config.js 的 server.proxy 中，target 指定后端地址，changeorigin 必须为 true，rewrite 去除代理前缀，前端请求须用绝对路径如 '/api/user/login'。
在开发阶段，Vite 通过 server.proxy 配置反向代理，让浏览器请求看似“同源”，实则由本地开发服务器转发到真实后端，从而绕过浏览器的同源策略限制。关键不是改请求地址，而是让前端发请求时走代理路径，Vite 自动中转。
代理配置写在哪？
必须写在项目根目录的 vite.config.js（或 vite.config.ts）中，位于 server 选项下：
- 若文件不存在，需手动新建，并确保导出
defineConfig对象 - 配置只在
vite dev启动时生效，构建上线后完全不参与 - 修改后必须重启开发服务，热更新不会重新加载 proxy 配置
基础代理怎么写？
假设后端运行在 http://localhost:8080，接口路径为 /user/login，前端希望用 /api/user/login 请求：
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
- target：填后端服务完整地址（支持 http/https、带端口、甚至内网 IP）
-
changeOrigin：必须设为
true，否则部分后端（如 Spring Boot）会因 Origin 头不匹配而拒绝请求 -
rewrite：把请求路径中的
/api去掉，使转发路径变为/user/login，匹配后端真实路由
前端请求怎么配合？
请求路径必须是**以 / 开头的绝对路径**，且前缀要与 proxy 规则一致：
- ✅ 正确：
axios.get('/api/user/login')或fetch('/api/users') - ❌ 错误：
axios.get('http://localhost:8080/api/user/login')（直接跨域） - ❌ 错误：
axios.get('./api/user/login')（相对路径，不触发代理）
建议统一在 request 封装层设置 baseURL: '/api'，避免每个接口硬编码前缀。
多接口或多环境怎么处理？
可以配置多个规则，或结合环境变量动态切换 target：
- 多个规则示例：
'/user'和'/admin'分别指向不同后端 - 环境变量用法：在
.env.development中定义VITE_API_BASE_URL=http://192.168.1.100:3000，再在配置中读取 - WebSocket 支持：加
ws: true即可代理 ws/wss 连接 - HTTPS 证书问题：目标为 https 但证书不合法时，加
secure: false
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
