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 相关文章推荐
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
node实现的爬虫功能示例
May 04 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 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
php foreach 使用&(与运算符)引用赋值要注意的问题
2010/02/16 PHP
基于php下载文件的详解
2013/06/02 PHP
PHP7.0版本备注
2015/07/23 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
jquery查找tr td 示例模拟
2014/05/08 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python 实时遍历日志文件
2016/04/12 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
python实现发送邮件功能
2017/07/22 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python使用wxPython实现计算器
2018/01/30 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
python定义具名元组实例操作
2021/02/28 Python
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
水利公司纪检监察自我鉴定
2014/02/25 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
销售口号大全
2014/06/11 职场文书
领导干部学习“三严三实”思想汇报
2014/09/15 职场文书