Vue
Vite构建的Vue项目，开发时的跨域问题
08-11 10:56开发环境下，前后分离开发请求后端接口时，浏览器因同源策略会拦截请求，遇到跨域的相关问题。
解决方案：Vite 开发代理
1. 在 vite.config.ts 中配置代理
proxy: {
'/api': {
target: 'http://www.mixuempacc.com',
changeOrigin: true, //修改请求头中的 origin
rewrite: (path) => path.replace(/^\/api/, '') //可选：去除 /api 前缀
}
}
2. 前端请求路径写法
// ❌ 错误：直接请求目标地址（会被跨域拦截）
await axios.get('http://www.xxx.com/api.php?op=sms&mobile=xxx')
// ✅ 正确：通过代理请求（以 /api 开头）
await axios.get('/api/api.php', {
params: {
op: 'sms',
mobile: 'xxx'
}
})
3. 代理转发规则
前端请求：/api/api.php?op=sms，代理后实际请求：http://www.xxx.com/api.php?op=sms
前端请求：/api/user/list，代理后实际请求：http://www.xxx.com/user/list
4、注意事项
代理只在开发环境生效
- npm run dev 时有效
- npm run build 打包后代理配置不会生效，需要后端配置 CORS 或 Nginx 反向代理
微信小程序
