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 相关文章推荐
一个加载js文件的小脚本
Jun 28 Javascript
jQuery动态添加 input type=file的实现代码
Jun 14 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
对vue 键盘回车事件的实例讲解
Aug 25 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 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
用户的详细注册和判断
2006/10/09 PHP
php访问查询mysql数据的三种方法
2006/10/09 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
短信提示使用 特效
2007/01/19 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
javascript中typeof操作符和constucor属性检测
2015/02/26 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
详解在Python中处理异常的教程
2015/05/24 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python3解释器知识点总结
2019/02/19 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
Python包和模块的分发详细介绍
2020/06/19 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
法务专员岗位职责
2014/01/02 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
社区戒毒工作方案
2014/06/04 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
导游词之山海关
2019/12/10 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS