Vue 3.x+axios跨域方案的踩坑指南
前端  /  管理员 发布于 4年前   751
缘起
最近实验课上需要重构以前写过的一个项目(垃圾堆),需要添加发生邮件提醒的功能,记得以前写过一个PHP版的实现,所以想把PHP写的功能整理成一个服务,然后在前端调用。但是这个项目是JavaWeb,也就是说我需要面对跨域的问题。不过本篇文章,讲的并不是如何解决这样的跨域问题,而是我在找如何解决这个问题的路上遇到的坑。
其实,在前端工程化大行其道的现在,前后端已经分离开来,前端为了提高工作流效率往往自己开一个小型的服务器,就比如webpack.devServer。这样在前端调用后端接口的时候必然会面临跨域的问题,
如题,Vue3.x + axios 跨域方案 就是解决这里的跨域问题。这里的跨域是基于webpack的devServer的代理功能(proxy)来实现开发环境中的跨域,也就是说本篇所讨论的并不能解决生产环境下的跨域问题,因为webpack.devServer是DevDependencies,一旦打包上线,这个proxy代理就会失效。但是这并不妨碍我们开发中使用跨域来提高开发效率和体验。
开始填坑
其实这个问题解决起来很简单,网上也是很多教程,为了文章完整性,我这里也做一个尽量完备的展示,介绍如何配置Vue3.x来实现跨域 。
vue.config.js中devServer.proxy的配置解析
Vue3.x的CLI工具比Vue2.x的CLI工具构建的项目要简化很多,根目录下只有./src和./public文件夹,所以网上很多教程说config目录下的vue.config.js是说的vue2.x版本。那么对于Vue3.x版本,构建也很简单,直接在根目录里建一个vue.config.js配置文件就可以了,我们直接看devServer.proxy里的代码:
我这里devServer的地址是:localhost:8080/,需要代理的地址是:localhost/index/phpinfo.php (我自己写的一个测试跨域用的php,返回一个‘ok')
下面是根据上面的地址需要配置的proxy对象
devServer : { proxy : { '/index' : { target : 'http://localhost/index', // ws : true, changeOrigin : true, pathRewrite : { '^/index' : '' } } } }
大部分教程到这里就停止了,但是我在这里做一个扩展,为了让读者理解这里的配置是如何起作用的(以下内容整理自http-proxy-middleware的npm描述里,http-proxy-middleware是一个npm模块,是proxy的底层原理实现)。
foo://example.com:8042/over/there?name=ferret#nose
\_/ \______________/\_________/ \_________/ \__/
| | | | |
scheme authority path query fragment
以我上面的配置为例,'/index'这个key在http-proxy-middleware中被称为context――用来决定哪些请求需要被target对应的主机地址(这里是http://localhost/index)代理,它可以是 字符串,含有通配符的字符串,或是一个数组,分别对应于path matching(路径匹配)wildcard path matching(通配符路径匹配)multiple path matching(多路径匹配),而这里的path指的就是上图所标识的path段。
简言之,这个key就是匹配path的,一旦匹配到符合的path,就会把请求转发的代理主机去,而代理主机的地址就是target字段对应的内容。
那pathRewrit是什么意思呢?意如其名,路径重写。就是把模式(这里是^/index)匹配到的path重写为对应的路径(这里是'',相当于删除了这个匹配到的路径)。除了删除,还有在原有路径上添加一个基础路径,或是改写一个路径的方式,这可以参考http-proxy-middleware的npm描述的option.pathRewrite章节 。
在Vue中使用axios
这个使用任意一个ajax封装的库都是可行的,axios,jquery.ajax或者是vue-resource都是可以的。
在Vue中使用axios,网上有两种方法,一种是将axios加入Vue的原型里,我更推荐第二种方法:
npm install axios vue-axios
import axios from 'axios';import VueAxios from 'vue-axios';Vue.use(VueAxios,axios);
以我上面的proxy配置为基础,想要让代理成功转发到localhost/index/phpinfo.php,在Vue实例中axios需要这样写访问地址:
this.axios.get('/index/phpinfo.php').then((res)=>{ console.log(res); })
我们来分析这些代码整个发挥作用的原理是什么?首先,axios去访问/index/phpinfo.php,这是个相对地址,所以真实访问地址其实是localhost:8080/index/phpinfo.php,然而/index/phpinfo.php被我们配置的/index匹配到了 ,所以访问被proxy代理,那转发到哪个路径呢?在pathRewrite中,我们将模式^/index的路径清除了,所以最终的访问路径是 target+pathRewrite+ 剩余的部分 , 这样也就是 http://localhost/index++/phpinfo.php
坑点
可能出现即使配置了proxy,但是依然没有任何卵用。
后续
本篇只解决了开发环境下的跨域问题,实际线上还不能跨域,目前这里有一些方案:
下一次讨论这个跨域问题,尝试解决。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家的支持。
123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号