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 相关文章推荐
Prototype使用指南之base.js
Jan 10 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
jquery文字上下滚动的实现方法
Mar 22 Javascript
JS分页效果示例
Oct 11 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
Vue核心概念Action的总结
Jan 18 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 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
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
PHP重定向的3种方式
2013/03/07 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
JS使用单链表统计英语单词出现次数
2016/06/16 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
JS实现容器模块左右拖动效果
2020/01/14 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python3爬虫学习之应对网站反爬虫机制的方法分析
2018/12/12 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
美国最值得信赖的宠物药房:Allivet
2019/03/23 全球购物
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
财务审计整改报告
2014/11/06 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
高中班长竞选稿
2015/11/20 职场文书
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis