解决VueCil代理本地proxytable无效报错404的问题

前言

因为项目中遇到了这个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的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • 解决vue项目打包上服务器显示404错误,本地没出错的问题

    1.使用脚手架搭建一个vue项目 2.运行,在本地运行没问题,接着打包上服务器,遇到404的错误,如下 这是webpack打包的结果,解决办法如下 1.修改build文件夹下的utils.js文件,大约在51行添加 publicPath:"../../" if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:&quo

  • 记一次vue跨域的解决

    好久不见,今天想写的是前段时间碰到的一个小问题.其实故事背景是前端的同学跟我说他们前端请求不了我后端的数据,说是跨域了. 其实跨域的问题,在如今前后端的时代非常常见,如果图方便的话,一般是在后端的请求以及拦截器中设置header,但是有一些业务需求单纯后端是解决不了的.还是需要前端自行来处理,这次碰到的就是前端需要自行处理的情况. 这里我不细说跨域的解决方案,只聊聊我是怎么解决的.如果大家想要知道更详细的跨域知识,可以点个在看!我下次写一个专题. vue跨域代理解决方案 其实需求比较简单,就是先

  • 解决VueCil代理本地proxytable无效报错404的问题

    前言 因为项目中遇到了这个bug:Vue cil2中配置代理proxytable成功,却无效报错404,在后端和代理都配置无误的情况下,还是报404,先已解决,特记录,希望能帮助到他人: 正文 1. 为什么要使用代理? 代理的作用是:把请求代理转发到其他服务器的中间件: 例如:我们当前主机为http://localhost:8080/,现在我们有一个需求,如果我们请求/api,我们不希望由3000来处理这个请求,而希望由另一台服务器https://www.example.org/api来处理这个

  • vue 解决setTimeOut和setInterval函数无效报错的问题

    1.在vue项目中的js代码语法与之前使用js和jquery还是有所出入的,现遇到一个点击按钮出现倒计时30S的效果 相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行 需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器. 2.按照最原始的倒计时效果,实现如下: //获取30s 控制操作倒计时 time(){ if(this.timeWait <= 0){ this.timeWait =

  • 如何正确解决VuePress本地访问出现资源报错404的问题

    背景 最近发现好多小伙伴刚用VuePress,然后一build完就直接用本地浏览器访问,结果出现黑块.仅仅出现那种问题还好,给项目安装 vuepress-plugin-serve 插件就行了, 但是如果有需求是需要离线查看 VuePress 生成后的文档呢?所以我特地研究了一下-- 解决办法 打开 .vuepress/config.js 文件,把 base 的值改成 ./,为了方便调试,最好这样写: //base: "/", base: "./", 写两个,一个用于

  • Vue代理报错404问题及解决(vue配置proxy)

    目录 Vue代理报错404问题 第一种路径拼接 /api 情况 第二种路径不变情况 注意点 新增说明:配置多个代理怎么搞? 总结 Vue代理报错404问题 问题描述: 代理后出现404: 第一种路径拼接 /api 情况 const path = require('path'); function resolve(dir) { return path.resolve(__dirname, dir) } module.exports = { publicPath: process.env.NODE_

  • 解决python3运行selenium下HTMLTestRunner报错的问题

    修改HTMLTestRunner.py以支持python3+ 搜索到的结果整理 修改一: 在python shell里输入 >>>import HTMLTestRunner >>> dir(HTMLTestRunner) 发现不认识StringIO (No module named StringIO) 确实3里面没有这个了,第94行引入的名称要改,改成import io,539行要改成self.outputBuffer = io.BytesIO() 修改二: 运行程序的

  • Django 解决阿里云部署同步数据库报错的问题

    写在最前面: 在阿里云租了一台服务器,搭建了一个博客,采用的是Ubuntu+Django+uwsgi+nginx+mysql的结构. 运行了一段时间后,我发现我忘记了django自带后台的密码! 然后很常规的修改密码的操作,就是无法登陆! 然后想再创建一个超级用户,登上去看看什么情况,结果创建超级用户又报错? 可是本地环境是ok的,然后同步数据库出错...反正没有对的. 然后同步数据库报错如下: 手机端截的图,查了一下报错,应该是setting.py的配置问题,然后我把生产上的代码拿下来看了下.

  • SpringBoot启动访问localhost:8080报错404的解决操作

    1.确定本地网络是通的: 2.确定SpringBootq启动后是不报错的 3.查看是不是自己在配置文件中加入了项目路径: 如果加入了项目路径的话,直接访问localhost:8080是不会到欢迎页面的,需要加上项目路径才能访问到欢迎页面,即localhost:8080/sell 补充知识:SpringBoot的web项目启动起来无法访问,访问时还是提示无法访问该网站 有时候可能是因为你的pom中导入了太多的依赖,一些依赖之间可能存在冲突导致项目未完全启动而无法访问显示:无法访问该网站 以上这篇S

  • 解决Window10系统下Node安装报错的问题分析

    前言 今天电脑重装了win10系统,在安装Node的过程中出现了下面的问题,下面就和大家分享下用来解决这种问题的小方法. 报错原因 随便问下度娘我们就可以知道,导致报错的原因是由于权限的关系,因此我们只需要使用管理员权限来运行当前Node安装包就可以解决报错问题了. 具体方法 使用管理员权限打开命令行工具并且cd到node安装包的项目文件夹下执行下面代码: msiexec /i package node-v6.9.1-x64.msi 运行指令之后接下来就会自动弹出安装界面,然后我们只需要按照提示

  • 解决VUEX兼容IE上的报错问题

    在IE 上使用Vuex的过程中,出现如下错误: SCRIPT5022: [vuex] vuex requires a Promise polyfill in this browser. 解决方法: 1.先安装babel-polyfill npm install --save-dev babel-polyfill 2.webpack.base.config.js下修改文件 entry: { 'babel-polyfill': 'babel-polyfill', app: './src/main.j

  • 解决Mac安装thrift因bison报错的问题

    安装thrift时,报错: Bison version 2.5 or higher must be installed on the system! 使用brew install bison 安装新版的bison $ brew list bison /usr/local/Cellar/bison/3.0.4/bin/bison /usr/local/Cellar/bison/3.0.4/bin/yacc /usr/local/Cellar/bison/3.0.4/lib/liby.a /usr/

随机推荐