解决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 相关文章推荐
javascript+xml技术实现分页浏览
Jul 27 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
JavaScript类的写法
Sep 17 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
原生js获取left值和top值的三种方法
Aug 02 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
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
php单一接口的实现方法
2015/06/20 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
Javascript动态创建表格及删除行列的方法
2015/05/15 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
vue2.0项目实现路由跳转的方法详解
2018/06/21 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
Python面向对象特殊成员
2017/04/24 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
用Python实现KNN分类算法
2017/12/22 Python
Python自定义线程类简单示例
2018/03/23 Python
python操作redis方法总结
2018/06/06 Python
python绘制漏斗图步骤详解
2019/03/04 Python
tensorflow如何批量读取图片
2019/08/29 Python
使用Python函数进行模块化的实现
2019/11/15 Python
Python如何批量生成和调用变量
2020/11/21 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
总务岗位职责
2013/11/19 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
个人自我鉴定总结
2014/03/25 职场文书
图书室标语
2014/06/21 职场文书
小学课外活动总结
2014/07/09 职场文书
中秋节祝酒词
2015/08/12 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers