Vite静态资源代理是在开发阶段将前端请求（如/api）转发至后端以绕过同源策略，需配置server.proxy，changeOrigin必须为true；路径重写用rewrite去除前缀；多代理支持HTTPS需设secure: false，WebSocket需ws: true；Axios baseURL须设为代理前缀（如/api）。
在 Vite 中配置静态资源代理，本质是让开发服务器把前端发往特定路径（如 /api）的请求，自动转发到后端服务地址，从而绕过浏览器同源策略。它不修改前端代码里的 URL，也不依赖后端开启 CORS，只在 本地开发阶段生效，打包上线后无效。
基础代理配置：最简写法
适用于后端接口路径与前端请求路径完全一致的情况（例如后端接口就是 /api/login，且运行在 http://localhost:3000）：
- 在
vite.config.ts或vite.config.js的server.proxy中添加键值对 - 键是请求前缀（如
'/api'），值是目标后端地址（字符串简写） -
changeOrigin: true必须开启，否则部分后端会因 Host 头不匹配而拒绝请求
示例：
vite.config.tsexport default defineConfig({
server: {
proxy: {
'/api': 'http://localhost:3000'
}
}
})
此时调用 fetch('/api/login')，Vite 会转发为 http://localhost:3000/api/login。
立即学习“Java免费学习笔记（深入）”；
路径重写：去掉前缀再转发
更常见的情况是：后端没有 /api 这层路径（比如真实接口是 /login），但你希望前端统一用 /api/login 调用——这时必须用 rewrite 函数手动去除前缀。
-
rewrite是一个接收原始路径的函数，返回处理后的路径 - 正则
/^\/api/精准匹配开头的/api，避免误删其他含api的路径 - 若后端地址本身带子路径（如
http://localhost:8080/server_war_exploded），也要确保 rewrite 后路径拼接正确
示例：
vite.config.ts'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
此时 fetch('/api/login') → 转发为 http://localhost:3000/login。
多级代理与 HTTPS 后端适配
项目常需对接多个后端服务（如用户服务、管理后台、文件上传），或调用 HTTPS 接口。这些场景需显式配置更多参数：
- 可同时定义多个代理规则，键名互不冲突即可（如
'/admin'、'/upload'） - 调用
https后端时，需设secure: false，否则代理会因 SSL 证书验证失败而中断 - 若需代理 WebSocket 连接（如实时通知），加上
ws: true
示例（混合配置）：
vite.config.tsproxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
'/admin': {
target: 'http://localhost:8001',
changeOrigin: true,
secure: false
},
'/upload': {
target: 'https://upload.example.com',
changeOrigin: true,
secure: false,
ws: true
}
}
配合 Axios 使用的关键点
前端使用 Axios 时，baseURL 必须设为代理前缀，不能写真实后端地址，否则代理不会触发：
- 错误写法：
baseURL: 'http://localhost:3000'—— 请求直接发出，跨域报错 - 正确写法：
baseURL: '/api'—— 请求走本地/api/xxx，被 Vite 拦截并转发 - 环境变量可用来区分开发/生产，但代理配置本身只在 dev 模式下起作用，线上需由 Nginx 或 CDN 统一处理
示例（request.ts）：
const service = axios.create({
baseURL: '/api', // 注意这里不是真实地址
timeout: 10000
}) 
