解决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的面向对象(一)
Nov 09 Javascript
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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
php4的session功能评述(三)
2006/10/09 PHP
基于mysql的论坛(2)
2006/10/09 PHP
php 方便水印和缩略图的图形类
2009/05/21 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
php class类的用法详细总结
2013/10/17 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
JavaScript版代码高亮
2006/06/26 Javascript
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
angularjs基础教程
2014/12/25 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
详解webpack+gulp实现自动构建部署
2017/06/29 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
[03:59]5分钟带你了解什么是DOTA2(第二期)
2017/02/07 DOTA
python中的一些类型转换函数小结
2013/02/10 Python
在Django的视图中使用form对象的方法
2015/07/18 Python
python实现小球弹跳效果
2019/05/10 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
解决Python中回文数和质数的问题
2019/11/24 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
工厂门卫的岗位职责
2014/07/27 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
医学专业大学生职业生涯规划书
2014/10/25 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB