vue proxytable代理根路径的同时增加其他代理方式
更新时间：2022年04月14日 09:21:01 作者：爱吃土豆的芬里尔狼
这篇文章主要介绍了vue proxytable代理根路径的同时增加其他代理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
proxytable代理根路径的同时增加其他代理
Vue 项目有一个需求，需要对根路径 ‘/’ 进行代理，但同时还存在其余特例路径的访问需求 ‘/py’，例：
- 代理 /* 到 localhost:5000
- 代理 /py/*到 localhost:5001
此时，需要将特例路径的代理写在根路径的前面，否则会被根路径的代理覆盖，无法成功进行代理：
module.exports = {
dev: {
proxyTable: {
'/py': {
target: `localhost:5001`,
changeOrigin: true,
pathRewrite: {
'/py': '',
}
},
'/': {
target: `localhost:5000`,
// secure: true, // 是否 https
changeOrigin: true, // 是否是跨域请求
}
}
}
}使用proxytable的路径问题
代码例子
proxyTable: {undefined
'/list': {undefined
target: 'http://api.xxxxxxxx.com',
changeOrigin: true,
pathRewrite: {
'^/list': '/list'
}
}
}这样我们在写url的时候，只用写成 /list/1 就可以代表 api.xxxxxxxx.com/list/1
proxytable的默认pathRewrite为
pathRewrite: {
'^/api': ''
}这样我们在写url的时候，写 /api/1 就可以代表 api.xxxxxxxx.com/1
注意： '/api' 为匹配项，target 为被请求的地址，因为在 ajax 的 url 中加了前缀 '/api'，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉。
changeOrigin参数，如果设置为true，那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了。
另：proxytable只在开发环境中使用
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了Vue.js第三天的学习笔记，vue.js计算属性computed,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
Vue3中使用reactive时,后端有返回数据但dom没有更新的解决
这篇文章主要介绍了Vue3中使用reactive时,后端有返回数据但dom没有更新的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
Vue CLI是一个用于快速Vue.js开发的完整系统。这篇文章主要介绍了Vue Cli3 创建项目的方法步骤，非常具有实用价值，需要的朋友可以参考下2018-10-10
今天小编就为大家分享一篇vuex直接赋值的三种方法总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要给大家介绍了关于前端开发利器Vite完整版详解的相关资料,Vite是一种基于ES模块的开发服务器和构建工具,专为现代化的前端开发而设计,需要的朋友可以参考下2023-11-11
表单校验是注册环节中必不可少的操作,表单校验通过一定的规则来确保用户提交数据的有效性,下面这篇文章主要给大家介绍了关于el-form表单验证的一些实用方法,需要的朋友可以参考下2023-01-01
最近工作中实现的一个效果不错,分享给大家,下面这篇文章主要给大家介绍了关于vue项目实战之圆柱状水波效果实现的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-12-12
vue在install时node-sass@4.14.1 postinstall:node scripts/buil
最近在npm install 的时候遇到了个问题,所以给大家总结下,下面这篇文章主要给大家介绍了关于vue在install时node-sass@4.14.1 postinstall:node scripts/build.js错误的解决方法,需要的朋友可以参考下2023-05-05
这篇文章主要介绍了7个实用的Vue开发技巧文。中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，下面我们来一起学习一下吧2019-05-05
这篇文章主要给大家介绍了关于element中一个单选框radio时的选中和取消的相关资料,文中通过图文以及代码示例介绍的非常详细,对大家的学习或者工作具有一定的参考价值,需要的朋友可以参考下2023-09-09
最新评论