需要多域名代理，因为本地开发时前端需同时调用多个不同端口的后端服务（如用户服务8090、文件服务8091、支付服务8092），单代理路径易致路由混乱、违背微服务设计；vite中通过server.proxy配置多个前缀（如'/user-api'→8090）并启用changeorigin和rewrite实现语义化、可调试的跨域转发。
本地开发时遇到多个后端服务（比如用户服务跑在 localhost:8090、文件服务在 localhost:8091、支付服务在 localhost:8092），前端要同时调用它们，但浏览器只允许同源请求——这时候单个代理规则不够用，得配置多域名代理。
为什么需要多域名代理
一个项目常对接不止一个后端：登录走用户中心，上传走文件服务，下单走支付网关。如果所有接口都强行塞进一个代理路径（比如全走 /api），后端路由容易混乱，也违背微服务拆分逻辑。多域名代理能让每个服务拥有独立前缀，语义清晰、调试方便、上线迁移也更平滑。
Vite 中配置多个代理规则
在 vite.config.js 的 server.proxy 里直接写多个键值对，每条对应一个服务：
-
'/user-api'→ 用户服务：target: 'http://localhost:8090' -
'/file-api'→ 文件服务：target: 'http://localhost:8091' -
'/pay-api'→ 支付服务：target: 'http://localhost:8092'
完整示例：
server: {
proxy: {
'/user-api': { target: 'http://localhost:8090', changeOrigin: true, rewrite: (path) => path.replace(/^\/user-api/, '') },
'/file-api': { target: 'http://localhost:8091', changeOrigin: true, rewrite: (path) => path.replace(/^\/file-api/, '') },
'/pay-api': { target: 'http://localhost:8092', changeOrigin: true, rewrite: (path) => path.replace(/^\/pay-api/, '') }
}
}
})
Vue CLI 项目（vue.config.js）的写法
结构类似，只是配置位置不同。在 devServer.proxy 下定义对象：
- 每个 key 是路径前缀（如
'/user-api'） - value 是目标地址和选项，
changeOrigin: true必须开启，否则后端可能收不到正确 Host 头而返回 404 - 不用写
pathRewrite，Vue CLI 用的是onProxyReq或内置重写逻辑，直接配pathRewrite会报错
示例：
module.exports = {devServer: {
proxy: {
'/user-api': { target: 'http://localhost:8090', changeOrigin: true },
'/file-api': { target: 'http://localhost:8091', changeOrigin: true },
'/pay-api': { target: 'http://localhost:8092', changeOrigin: true }
}
}
}
前端代码怎么配合才真正生效
代理只是“转发”，前端必须发对地址，它才会被接管：
- Axios 请求用相对路径：
axios.get('/user-api/login')✅，不是axios.get('http://localhost:8090/login')❌ - 确保 baseURL 设为
''或'/'，不能写死任何后端地址 - 检查浏览器 Network 面板：请求 URL 显示为
http://localhost:5173/user-api/login，状态码是 200，且响应头里没有 CORS 报错——说明代理已起作用
改完配置后务必重启开发服务器，否则新规则不会加载。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
