解决VueCil代理本地proxytable无效报错404的问题


Posted in Javascript onNovember 07, 2020

前言

因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人;

正文

1. 为什么要使用代理?

代理的作用是:把请求代理转发到其他服务器的中间件;

例如:我们当前主机为http://localhost:8080/,现在我们有一个需求,如果我们请求/api,我们不希望由3000来处理这个请求,而希望由另一台服务器https://www.example.org/api来处理这个请求怎么办?

这时候就要使用代理来解决!

2. 在vue中如何使用多个代理?

module.exports = {
dev: {
 proxyTable: {
  // 第一个代理
  '/api-test': { 
  target: 'https://www.example.org:', /// 目标服务器 host
  ws:true, //是否启用websocket
  secure: true, // 如果是https接口,需要配置这个参数
  changeOrigin: true, // // 默认false,是否需要改变原始主机头为目标URL,是否跨域
  pathRewrite: {
   '^/api-test/old': '/api-test/new' // 重写请求,比如我们源访问的是api-test/old,那么请求会被解析为/api-test/new
  },
  //第二个代理
  '/api-else': { 
  target: 'https://197.32.22.33:8090', 
  ws:true, //是否启用websocket
  secure: true, 
  changeOrigin: true, 
  pathRewrite: {
   '^/api-else': '' //默认写法,如果不写pathRewrite就是默认为空;
  },
  //第三个代理
  '/api-three': { 
  target: 'https://197.32.22.33:9090', 
  changeOrigin: true, 
  pathRewrite: {
   '^/api-three': '/api-three' //重写请求,这样本地请求不会有两次/api-three
  },
  }
 },

上述代码即可在vue-cil项目中配置代理;

代理的参数有很多,详细可以查看:http-proxy-middleware中的Options,自行添加;

那下面我们来解析一下为什么会:Vue代理本地proxytable成功,却无效报错404的几种情况

3. bug 原因分析

1.在浏览器或postman中测试接口是否正常访问;(最重要!!不然改半天都没用)

那怎么才是成功的访问呢?

例如:拿第二个代理举例:你要访问的接口为https://197.32.22.33:8090/api-else/getsomething.json,在浏览器直接输入有返回值并测试无误后再进行下一步;

2.要确保书写方式完全正确!

2.1(参考写法2) 这时候你本地去请求的接口地址会变成:http://localhost:8080/api-else/api-else/getsomething.json才是正常的!

是不是会好奇为什么会有两个/api-else,因为在本地:http://localhost:8080/api-else相当于:https://197.32.22.33:8090,这才是正常的!

2.2 (参考写法3)

在按上述写法还是有误的情况下,可以参考写法3的路由去更改测试。例:你要访问的接口为https://197.32.22.33:9090/api-three/getThreething.json,本地配置后:http://localhost:8080/api-three/getThreething.json。

多说一句,为什么要提第三种写法?

这种适用于前后端分离多后台项目,后台项目的包名为:api-three,使用第2中写法,在打包之后部署生产环境会出现请求的问题(我们自己项目踩过的坑,偶发),所以之后规定代理和后台包名统一,并且不能直接写在请求中,而是在配置代理后,重写代理的请求,指向包名;

3.请修改完config的index.js后,答应我一定重启下项目npm run dev;

4.也是我这次bug的原因(正经脸,这个超级细微!)

在配置多个代理的情况下,代理名称不能相同,也不能出现重叠的情况!

错误示范(第二个代理失效):

proxyTable: {
  // 第一个代理
  '/api-test': { 
  target: 'https://www.example.org:', /// 目标服务器 host
  },
  //第二个代理
  '/api-testAAA': { 
  target: 'https://197.32.22.33:8090', 
}

这的错误真的很难发现,在查了源码才看懂的;

这里说一下,为什么这样写会404!

vue的代理是基于 http-proxy-middleware实现的,而http-proxy-middleware对走哪个代理名称的的方法如下:

function matchSingleStringPath(context, uri) {
 const pathname = getUrlPathName(uri);
 return pathname.indexOf(context) === 0;
}

是的!他用的是indexOf() === 0来判断的!!!所以如果你的多个代理重叠/api-testAAA和/api-test这样出现的话,他们是都会返回true的!

但是/api-test更快判断完,所以/api-testAAA就失效了!!!

结语

说明:Vue cil的版本号是2,老版本的项目了;之后会记录下新版本vue cil 3+学习过程;

好了,吐槽完了,希望大家都不要踩坑~

补充知识:关于Vue的生产环境proxyTable代理问题

1、通过在 config/index.js 配置文件中找到proxyTable配置项

dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
  '/api': { //3
  target: 'http://xxx:8080',
  changeOrigin: true,
// secure:false 代理https必须要加
  pathRewrite: {
   // 1 '^/api': '/api' 这种接口配置出来  http://xxx:8080/api/getlist
   // 2 ^/api': '/' 这种接口配置出来  http://xxx:8080/getlist
  }
  }
 }
 }

2、上面代码里的1和2的区别

当你接口有api的时候就需要^api的意思就是有api会首先使用api,防止被系统认为3处的api,如果接口中没有api则不需要,即可以省略,总结:

接口以“/api”开头的配置 数字1 ,没有则不需要

3、如果配置多个代理

dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: {
  '/api': { //3
  target: 'http://xxx:8080',
  changeOrigin: true,
  pathRewrite: {
   // A '^/api': '/api' 这种接口配置出来  http://xxx:8080/api/getlist
   // ^/api': '/' 这种接口配置出来  http://xxx:8080/getlist
  }
  },
 '/api/1': { //
  target: 'http://xxx:8081',
  changeOrigin: true,
  pathRewrite: {
   // A '^/api/1': '/api/1' 这种接口配置出来  http://xxx:8081/api/1/getlist
   // ^/api/1': '/' 这种接口配置出来  http://xxx:80801/getlist
  }
  }
 
 }
 }

上面的调用接口的时候:

A /api/1/getlist 即可 http://xxx:8081/api/1/getlist

/api/getlist 即可 http://xxx:8080/api/getlist

第二种情况

/api/1/getlist 即可 http://xxx:8081/getlist

/api/getlist 即可 http://xxx:8080/getlist

以上这篇解决VueCil代理本地proxytable无效报错404的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
prototype Element学习笔记(篇二)
Oct 26 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
Javascript 是你的高阶函数(高级应用)
Jun 15 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
简单实现js拖拽效果
Jul 25 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
layui原生表单验证的实例
Sep 09 Javascript
Nuxt 项目性能优化调研分析
Nov 07 #Javascript
js实现日历
Nov 07 #Javascript
工作中常用js功能汇总
Nov 07 #Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 #Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 #Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 #Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 #Javascript
You might like
一个程序下载的管理程序(四)
2006/10/09 PHP
聊天室php&mysql(三)
2006/10/09 PHP
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php查询whois信息的方法
2015/06/08 PHP
ThinkPHP模型详解
2015/07/27 PHP
laravel学习教程之关联模型
2016/07/30 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
ThinkPHP框架获取最后一次执行SQL语句及变量调试简单操作示例
2018/06/13 PHP
IE8 原生JSON支持
2009/04/13 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
2015/12/08 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
寻找完美的房车租赁:RVShare
2019/02/23 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
詹天佑教学反思
2014/04/30 职场文书
法定代表人资格证明书
2014/09/11 职场文书
购房委托书范本
2014/09/18 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书