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操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
js 判断checkbox是否选中的实现代码
Nov 23 Javascript
常用一些Javascript判断函数
Aug 14 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
jquery实现图片列表鼠标移入微动
Dec 01 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
浅析js实现网页截图的两种方式
Nov 01 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排序算法(冒泡排序,快速排序)
2012/10/09 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
php自定义错误处理用法实例
2015/03/20 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
jquery控制display属性为none或block
2014/03/31 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
Javascript之高级数组API的使用实例
2019/03/08 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
Vue实现手机计算器
2020/08/17 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
[00:36]DOTA2勇士令状莱恩声望物品——冥晶之厄展示
2018/05/25 DOTA
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
python判断给定的字符串是否是有效日期的方法
2015/05/13 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
浅谈Python中的字符串
2020/06/10 Python
什么是SQL Server的确定性函数和不确定性函数
2016/08/04 面试题
三维科技面试题
2013/07/27 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
如何书写授权委托书?
2019/06/25 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
Mysql中调试存储过程最简单的方法
2021/06/30 MySQL