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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
写给小白看的JavaScript异步
Nov 29 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
javascript import css实例代码
2008/07/18 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
vue登录路由验证的实现
2017/12/13 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
轻量级JS Cookie插件js-cookie的使用方法
2018/03/22 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
javascript中的event loop事件循环详解
2018/12/14 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
Python 冒泡,选择,插入排序使用实例
2015/02/05 Python
Python实现的RSS阅读器实例
2015/07/25 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
pyqt5 键盘监听按下enter 就登陆的实例
2019/06/25 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
仓库保管员岗位职责
2013/12/20 职场文书
仓库管理制度
2014/01/21 职场文书
酒店端午节促销方案
2014/02/18 职场文书
大学毕业感言200字
2014/03/09 职场文书
委托书怎么写
2014/07/31 职场文书
个人批评与自我批评
2014/10/15 职场文书
研讨会通知
2015/04/27 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
单位病假条范文
2015/08/17 职场文书
一文搞懂python异常处理、模块与包
2021/06/26 Python
Python Django模型详解
2021/10/05 Python
python 详解turtle画爱心代码
2022/02/15 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python