webpack+vue-cil 中proxyTable配置接口地址代理操作


Posted in Javascript onJuly 18, 2020

在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可:

dev: {

 // 静态资源文件夹
 assetsSubDirectory: 'static',

 // 发布路径
 assetsPublicPath: '/',

 // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
 // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
 // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
 proxyTable: {
  '/api': {
  target: 'http://xxxxxx.com', // 接口的域名
  // secure: false, // 如果是https接口,需要配置这个参数
  changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
  pathRewrite: {
   '^/api': ''
  }
  }
 },
 // 本地访问 http://localhost:8080
 host: 'localhost', // can be overwritten by process.env.HOST

接口地址原本是 /save/index,但是为了匹配代理地址,在前面加一个 /api, 因此接口地址需要写成这样的即可生效 /api/save/index。

注意: '/api' 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。

补充知识:webpack -- 关于proxyTable的配置在开发环境和生产环境中的原理解析

前言

首先,proxyTable是我们在本地开发环境中调试接口用的,目的是为了解决本地跨域的问题,因为本地地址为localhost:xxxx/xxx

在线上的生产环境是没用的!!!

假设我们用的是vue-cli命令行工具生成的webpack项目模板,我们很容易能在config文件夹下面找到index.js文件。

本地如何配置

假设我要请求的地址为

'http://xxx.com/scada/json/aa.tpl'

我们在index.js文件中找到如下代码:我推荐了一种写法,后面我会说为什么

那么我请求的那段代码就是这样的

axios.get('/scada/json/aa.tpl').then((res) => {
 //........
})

稍微解释一下其中的原理:当发请求的时候,proxy就会起作用,他会在接口'/scada'前面加上 ‘http://xxx.com:123',成为 ‘http://xxx.com:123/scada/json/aa.tpl' 由于我们配置中的 pathRewrite字段需要将 '/scada'写为 ‘/scada',所以请求接口还是 ‘http://xxx.com:123/scada/json/aa.tpl'

继续向下看,干货还在后面

假设几种其它的写法

假设一

如果proxyTable配置是这样的

proxyTable: {
 '/scada': {
 target: 'http://xxx.com:123', 
 changeOrigin: true,
 pathRewrite: {
  '^/scada': '/'  
 }
 }

那么我们的请求代码必须写成这样

axios.get('/scada/scada/json/aa.tpl').then((res) => {
 //........
 //是不是有点难受
})

假设二

如果proxyTable配置是这样的,也就是重新起个名字

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

那么我们的请求代码必须写成这样

axios.get('/api/scada/json/aa.tpl').then((res) => {
 //........
 //这种写法还能接受,但是有个致命的缺点
})

再向下看,看看我推荐的写法的真真优势

打包上线的问题

这里只说代码上线之后和接口在同源情况下,如果不同源则存在跨域,这里先不考虑这种情况

假如我们把打包后的代码也部署到了 'http://xxx.com:123'上

上线后的代码为生产环境,没有了proxy

那么他是怎么解析请求的呢?比如下面这个请求

axios.get('/scada/json/aa.tpl').then((res) => { //........

})

由于 '/'表示的是根目录的意思,所以会解析为hostname + port + 请求的地址,即为 ‘http://xxx.com:123/scada/json/aa.tpl' ,没有一点问题,接口肯定能请求到

那么如果按照上面我说的假设一或者假设二的写法呢?

是不是会解析为 ‘http://xxx.com:123/scada/scada/json/aa.tpl' 和 ‘http://xxx.com:123/api/scada/scada/json/aa.tpl'

所以,假设一和假设二需要在打包之前修改请求地址才能打包,增加了许多不必要的麻烦

以上这篇webpack+vue-cil 中proxyTable配置接口地址代理操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之四
Jul 23 Javascript
js保存当前路径(cookies记录)
Dec 14 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
js获取当前页面路径示例讲解
Jan 08 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 #Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 #Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 #Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 #Javascript
vue中用 async/await 来处理异步操作
Jul 18 #Javascript
vue 使用async写数字动态加载效果案例
Jul 18 #Javascript
vue-router为激活的路由设置样式操作
Jul 18 #Javascript
You might like
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jQuery选择器源码解读(七):elementMatcher函数
2015/03/31 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
2017/12/23 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python进程和线程用法知识点总结
2019/05/28 Python
python实现五子棋小程序
2019/06/18 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python如何将两个txt文件内容合并
2019/10/18 Python
python中matplotlib实现随鼠标滑动自动标注代码
2020/04/23 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
大二法英学生职业生涯规划范文
2014/02/27 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js