使用VueCil代理本地proxytable时出现报404错怎么解决

　　介绍

使用VueCil代理本地proxytable时出现报404错怎么解决?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

前言

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

正文

<强> 1。为什么要使用代理?

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

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

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

<强> 2。在vue中如何使用多个代理?

模块。出口={ 　　戴夫:{ 　　proxyTable: {//第一个代理 　　& # 39;/api-test& # 39;: { 　　目标:& # 39;https://www.example.org & # 39;///目标服务器主机 　　ws:真的,//是否启用websocket 　　安全:真的,//如果是https接口,需要配置这个参数 　　changeOrigin:真的,////默认假,是否需要改变原始主机头为目标URL,是否跨域 　　pathRewrite: { 　　& # 39;^/api-test/老# 39;:& # 39;/api-test/新# 39;//重写请求,比如我们源访问的是api-test/老,那么请求会被解析为/api-test/新 　　},//第二个代理 　　& # 39;/api-else& # 39;: { 　　目标:& # 39;https://197.32.22.33:8090& # 39; 　　ws:真的,//是否启用websocket 　　安全:没错, 　　changeOrigin:没错, 　　pathRewrite: { 　　& # 39;^/api-else& # 39;: & # 39; & # 39;//默认写法,如果不写pathRewrite就是默认为空; 　　},//第三个代理 　　& # 39;/api-three& # 39;: { 　　目标:& # 39;https://197.32.22.33:9090& # 39; 　　changeOrigin:没错, 　　pathRewrite: { 　　& # 39;^/api-three& # 39;: & # 39;/api-three& # 39;//重写请求,这样本地请求不会有两次/api-three 　　}, 　　} 　　},

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

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

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

<强> 3。错误原因分析

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

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

例如:拿第二个代理举例:你要访问的接口为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。请修改完配置的索引。js后,答应我一定重启下项目npm dev;

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

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

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

 proxyTable: {//第一个代理
　　& # 39;/api-test& # 39;: {
　　目标:& # 39;https://www.example.org & # 39;///目标服务器主机
　　},//第二个代理
　　& # 39;/api-testAAA& # 39;: {
　　目标:& # 39;https://197.32.22.33:8090& # 39;
　　}

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

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

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

函数matchSingleStringPath(上下文,uri) {
　　const路径名=getUrlPathName (uri);
　　返回pathname.indexOf(上下文)===0;
　　}

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

使用VueCil代理本地proxytable时出现报404错怎么解决