首页 > 技术分享 > Vue
收藏

Vite构建的Vue项目,开发时的跨域问题

08/11 10:25
大潇博客 原创文章,转载请标明出处

开发环境下,前后分离开发请求后端接口时,浏览器因同源策略会拦截请求,遇到跨域的相关问题。


解决方案: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 反向代理


打赏

阅读排行

大家都在搜

博客维护不易,感谢你的肯定
扫码打赏,建议金额1-10元
  • 15601023311