Vue-cli3.x + axios 跨域方案踩坑指北


Posted in Javascript onJuly 04, 2019

缘起

最近实验课上需要重构以前写过的一个项目(垃圾堆),需要添加发生邮件提醒的功能,记得以前写过一个PHP版的实现,所以想把PHP写的功能整理成一个服务,然后在前端调用。但是这个项目是JavaWeb,也就是说我需要面对跨域的问题。不过本篇文章,讲的并不是如何解决这样的跨域问题,而是我在找如何解决这个问题的路上遇到的坑。

其实,在前端工程化大行其道的现在,前后端已经分离开来,前端为了提高工作流效率往往自己开一个小型的服务器,就比如webpack.devServer。这样在前端调用后端接口的时候必然会面临跨域的问题,如题,Vue-cli 3.x + axios 跨域方案 就是解决这里的跨域问题。这里的跨域是基于webpack的devServer的代理功能(proxy)来实现开发环境中的跨域,也就是说本篇所讨论的并不能解决生产环境下的跨域问题,因为webpack.devServer是DevDependencies,一旦打包上线,这个proxy代理就会失效。但是这并不妨碍我们开发中使用跨域来提高开发效率和体验。

开始填坑

其实这个问题解决起来很简单,网上也是很多教程,为了文章完整性,我这里也做一个尽量完备的展示,介绍如何配置Vue-cli 3.x来实现跨域 。

vue.config.js中devServer.proxy的配置解析

Vue-cli3.x比Vue-cli2.x构建的项目要简化很多,根目录下只有./src和./public文件夹,所以网上很多教程说config目录下的vue.config.js是说的vue-cli 2.x版本。那么对于Vue-cli 3.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转发了这个请求到一个新的地址。

后续

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

  1. Nginx反向代理跨域
  2. JSONP
  3. CORS

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 日期常用的方法
Nov 11 Javascript
JavaScript打字小游戏代码
Dec 26 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
JS开发常用工具函数(小结)
Jul 04 #Javascript
Vue.js 中的实用工具方法【推荐】
Jul 04 #Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 #Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 #Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 #Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 #Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 #Javascript
You might like
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
JSON PHP中,Json字符串反序列化成对象/数组的方法
2018/05/31 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
jQuery验证插件validate使用详解
2016/05/11 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
js实现计算器功能
2020/08/10 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
Python缩进和冒号详解
2016/06/01 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
web字体加载方案优化小结
2019/11/29 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
英语专业推荐信
2013/11/16 职场文书
公司市场部岗位职责
2013/12/02 职场文书
大学军训感言1500字
2014/03/09 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
树转促学习心得体会
2014/09/10 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang
Win11软件图标固定到任务栏
2022/04/19 数码科技
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers