解决VueCil代理本地proxytable无效报错404的问题
作者:jcat_李小黑 发布时间:2024-05-11 09:13:33
前言
因为项目中遇到了这个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+学习过程;
来源:https://blog.csdn.net/weixin_43216105/article/details/105844391
猜你喜欢
- 说明1、如果数据集是高维度的,选择谱聚类是子空间的一种。2、如果数据量是中小型的,比如在100W条以内,K均值会是更好的选择;如果数据量超过
- 使用Django的时候,我发现一个很神奇的装饰器: @login_required, 这是控制一个view的权限的,比如一个视图必须登录才可
- # -*-coding:utf8 -*- ''' Python常见文件操作示例 os.path 模块中的路径名访问函
- 在我前一阵子刚刚写了“HTML5与Flash,不得不说的话题”的评论后,如各位所料,由于牵扯到多方利益和未来标准制定的角色份量,这不,有可能
- MySQL有多种存储引擎:MyISAM、InnoDB、MERGE、MEMORY(HEAP)、BDB(BerkeleyDB)、EXAMPLE、
- 有2个不同的方法增加用户:通过使用GRANT语句或通过直接操作MySQL授权表。比较好的方法是使用GRANT语句,因为他们是更简明并且好像错
- 小白学习一下vue,然后了解到了webpack相关的知识,然后就各种安装cnpm 是国内的源相比国际源要快很多,不知道cnpm的自己查一下吧
- 适配器设计模式是懒得改动某些代码,或者某些接口不方便改动的时候,使用一个特定的封装,一些特定的编写办法,使不同的接口可以使用同种调用方式使用
- 1.库的操作查看当前mysql数据库下默认有哪些库show databases;创建一个库 create database database
- 概述从前面的对Python基础知识方法介绍中,我们几乎是围绕Python内置方法进行探索实践,比如字符串、列表、字典等数据结构的内置方法,和
- 函数,对于人类来讲,能够发展到这个数学思维层次,是一个飞跃。可以说,它的提出,直接加快了现代科技和社会的发展,不论是现代的任何科技门类,乃至
- 本文实例为大家分享了pygame实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下由于这段时间实在是太聊了,没什么事做,游戏也玩腻了,所以
- 本文实例讲述了php实现压缩多个CSS与JS文件的方法。分享给大家供大家参考。具体实现方法如下:1. 压缩css<?php
- 如下所示:# -*- coding: utf-8 -*-# @Time :18-8-2 下午3:23import sysreload(sys
- 1、生成配置文件''' 生成配置文件'''import configparse
- MySQL之前有一个查询缓存Query Cache,从8.0开始,不再使用这个查询缓存,那么放弃它的原因是什么呢?在这一篇里将为您介绍。My
- 本文实例讲述了python使用socket向客户端发送数据的方法。分享给大家供大家参考。具体如下:import socket, syspor
- 功能如下: 这里就需要一开始只显示6个数据,点击展开才显示全部HTML里调用showdetailList:<div>  
- 1.声明后未赋值,表现相同//一个例子'use strict';(function() { var varTest; let
- 在安装好MYSQL ODBD的驱动程序后,应如何建立ASP文件连接数据库?我们有两种方法:一种是在ODBC数据源中建立一个DSN。具体方法是