Vue-cli proxyTable 解决开发环境的跨域问题详解


Posted in Javascript onMay 18, 2017

和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了一堆参数,最后还得我把自己的localhost映射成上线时将要使用的域名。

今天翻看代码时,突然发现vue-cli的config文件里有一个参数叫proxyTable,看这个名字就感觉能解决问题,于是我就去搜了一下,果然。在vuejs-templates,也就是vue-cli的使用的模板插件里,有关于API proxy的说明,使用的就是这个参数。

https://vuejs-templates.github.io/webpack/proxy.html

这个参数主要是一个地址映射表,你可以通过设置将复杂的url简化,例如我们要请求的地址是api.xxxxxxxx.com/list/1,可以按照如下设置:

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

这样我们在写url的时候,只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.

那么又是如何解决跨域问题的呢?其实在上面的'list'的参数里有一个changeOrigin参数,接收一个布尔值,如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求,这样就不会有跨域问题了,当然这只适用于开发环境。增加的代码如下所示:

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  changeOrigin: true,
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

vue-cli的这个设置来自于其使用的插件http-proxy-middleware

github:https://github.com/chimurai/http-proxy-middleware

深入了解的话可以看该插件配置说明,似乎还支持websocket,很强大的插件。

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

Javascript 相关文章推荐
jquery 多行滚动代码(附详细解释)
Jun 17 Javascript
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
layui 富文本编辑器和textarea值的相互传递方法
Sep 18 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
Javascript实现倒计时时差效果
May 18 #Javascript
vue-cli webpack 开发环境跨域详解
May 18 #Javascript
JavaScript实现简单的星星评分效果
May 18 #Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 #Javascript
Javascript实现信息滚动效果
May 18 #Javascript
详解Vue-cli 创建的项目如何跨域请求
May 18 #Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 #Javascript
You might like
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
浅谈php中urlencode与rawurlencode的区别
2016/09/05 PHP
jquery tab标签页的制作
2010/05/10 Javascript
用jquery实现自定义风格的滑动条实现代码
2011/04/26 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
jQuery Ajax请求状态管理器打包
2012/05/03 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
nodejs批量下载图片的实现方法
2017/05/19 NodeJs
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
详解Python Socket网络编程
2016/01/05 Python
简单谈谈python的反射机制
2016/06/28 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
pyhton列表转换为数组的实例
2018/04/04 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
学生会竞选自荐信
2013/10/12 职场文书
九年级体育教学反思
2014/01/23 职场文书
试用期员工工作自我评价
2014/09/10 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
商业计划书之服装
2019/09/09 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
python编写五子棋游戏
2021/05/25 Python