解决vue-element-admin中配置跨域出现的问题
更新时间:2024年07月24日 15:30:26 作者:曦和百里
这篇文章主要介绍了解决vue-element-admin中配置跨域出现的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue-element-admin配置跨域问题
首先来看一下项目结构目录
我们可以看到.env.development和.env.production文件以及vue.config.js
这里是涉及到了接口的转发(我们可以看到base,base的意思是所有的请求前缀都会加上它)
重点来了(如何配置跨域)
proxy: { [process.env.VUE_APP_BASE_API]: { target: 'http://127.0.0.1:3000/', ws: true, changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } } }
target
:是我要跨域的地址。changeOrigin
:开启跨域pathRewrite
:匹配到所有含有当前环境所对应的前缀的接口进行转发
坑来了(这真的是留了好大一个坑,之前查了好久,后来无意间解决了)
在.env.development和.env.production文件中
如果你的#base api和VUE_APP_BASE_API=api
这两个地方不对应的话,那么你就不能够实现我所截图的跨域配置,我之前的配置的都是手动去改,这个坑解决了之后何其优雅,只需要更改当前是开发还是生产环境就好了
- 更改:
lintOnSave: process.env.NODE_ENV === 'development'
- 或者:
lintOnSave: process.env.NODE_ENV === 'production'
这处就能够去自动匹配了,之前都是要改好几个地方,这样子显得比较优雅。
原因是没有检索到这个前缀
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue实现网页首屏加载动画及页面内请求数据加载loading效果
Loading加载动画组件看起来很简单不重要,实际上它是保证用户留存的关键一环,下面这篇文章主要给大家介绍了关于Vue实现网页首屏加载动画及页面内请求数据加载loading效果的相关资料,需要的朋友可以参考下2023-02-02
最新评论