vite开发环境解决跨域的核心是三步：改vite.config.ts、加server.proxy规则、前端请求用相对路径；通过开发服务器转发请求，不依赖后端cors配置，对浏览器透明。
在 Vite 开发环境中解决跨域问题，核心是让前端请求先发给 Vite 自带的开发服务器，再由它转发到真实后端——浏览器全程只跟本地同源地址通信，自然不触发跨域限制。
代理配置写在 vite.config.ts 里
打开项目根目录的 vite.config.ts（或 .js），在 server.proxy 中添加规则。它是一个对象，键是前端请求的路径前缀，值是转发目标和行为控制：
-
target：填后端服务完整地址，比如
http://localhost:8080或https://api.example.com - changeOrigin: true：必须开启，否则后端可能因 Origin 头不匹配而拒绝请求
-
rewrite：用于去掉前缀，例如把
/api/user转为/user再发给后端
基础代理示例（后端接口带 /api）
如果后端本身所有接口都以 /api 开头（如 http://localhost:8080/api/login），可省略 rewrite：
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
secure: false // 后端是 http 时需设为 false
}
}
}
此时调用 fetch('/api/login')，Vite 会转发到 http://localhost:8080/api/login。
路径重写示例（后端接口不带 /api）
如果后端接口是 /login、/users 这类无前缀路径，但你想前端仍用 /api/login，就得用 rewrite 去掉前缀：
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
这样 fetch('/api/login') 就会变成向 http://localhost:8080/login 发起请求。
前端请求必须用相对路径
代理只对匹配前缀的路径生效，所以不能写完整 URL：
- ❌ 错误：
fetch('http://localhost:8080/api/login') - ✅ 正确：
fetch('/api/login')或axios.get('/api/login')
建议在请求封装中统一使用 import.meta.env.VITE_API_BASE_URL || '/api'，配合 .env.development 文件管理环境变量，开发走代理、上线直连，逻辑清晰不易出错。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
