解决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 相关文章推荐
详解new function(){}和function(){}() 区别分析
Mar 22 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
var与Javascript变量隐式声明
Sep 17 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
js单词形式的运算符
May 06 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
Oct 12 Javascript
返回上一个url并刷新界面的js代码
Sep 12 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 in_array 函数使用说明与in_array需要注意的地方说明
2010/04/13 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
PHP将身份证正反面两张照片合成一张图片的代码
2017/04/08 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
一个轻量级的javascript库 pj介绍
2010/12/19 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
2014/12/03 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
JS实现的合并多个数组去重算法示例
2018/04/11 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python2.x与Python3.x的区别
2016/01/14 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Sanic框架配置操作分析
2018/07/17 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
2014大学辅导员工作总结
2014/12/02 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers