Vue 3.x+axios跨域方案的踩坑指南


Posted in Javascript onJuly 04, 2019

缘起

最近实验课上需要重构以前写过的一个项目(垃圾堆),需要添加发生邮件提醒的功能,记得以前写过一个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,但是依然没有任何卵用。

  • 大部分情况是因为你的proxy配置和你的访问路径不匹配,或者即使匹配到了,但是转发出去的地址不对,没有命中后端给的API
  • 或者看看axios,有没有使用正确姿势?
  • 还有一点,或许你看到返回的response里的url依然显示的是本地主机,但是数据已经正常返回,这是正常的,因为我们访问的本来就是本地主机,只不过proxy转发了这个请求到一个新的地址。

后续

本篇只解决了开发环境下的跨域问题,实际线上还不能跨域,目前这里有一些方案:

  • Nginx反向代理跨域
  • JSONP
  • CORS

下一次讨论这个跨域问题,尝试解决。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS 文件大小判断的实现代码
Apr 07 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Vue.js递归组件实现组织架构树和选人功能
Jul 04 #Javascript
vue-cli配置flexible过程详解
Jul 04 #Javascript
vue动态配置模板 'component is'代码
Jul 04 #Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 #Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 #jQuery
小程序中canvas的drawImage方法参数使用详解
Jul 04 #Javascript
vue如何限制只能输入正负数及小数
Jul 04 #Javascript
You might like
两种设置php载入页面时编码的方法
2014/07/29 PHP
php中字符集转换iconv函数使用总结
2014/10/11 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
jquery提交form表单时禁止重复提交的方法
2014/02/13 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
.NET微信公众号开发之创建自定义菜单
2015/07/16 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
2015/12/09 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
[42:06]2019国际邀请赛全明星赛 8.23
2019/09/05 DOTA
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
如何处理Python3.4 使用pymssql 乱码问题
2016/01/08 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
基于python生成器封装的协程类
2019/03/20 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
消防安全管理制度
2014/02/01 职场文书
个人函授自我鉴定
2014/03/25 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
工程主管竞聘书
2015/09/15 职场文书