木灵鱼儿
阅读:1367
vue cli3-cli4 本地反代解决本地调试线上api跨域问题 proxy
跨域一直是很烦人问题,不过好现在现在跨域,大部分都是肛后端,后端设置CORS信息即可。
但是也有少部分,可能前端能完成的事前端搞定就行了,懒得麻烦后端,这种情况一般都是进行反代。
使用场景
后端提供了一个在线api地址,但是该地址段和本地localhost不在同一域名下,所以产生了跨域。
配置反代 proxy
这种情况,我们的vue-cli提供了一个很好的功能,反代。
首先我们需要找到vue cli的配置文件:vue.config.js
,他存在项目的根目录,和package.json
同级,如果没有,手动创建即可,只是一个js文件而已。
打开文件填入以下信息:
vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'https://www.baidu.com', //API服务器的地址
ws: true, //代理websockets
changeOrigin: true, // 虚拟的站点需要更管origin
pathRewrite: { //重写路径 比如'/api/aaa/ccc'重写为'/aaa/ccc'
'^/api': '/'
}
}
},
}
}
这里我讲下这段代码做了什么?
首先,他将https://www.baidu.com
这个地址段反代成了本地地址段下的一个连接:
http://localhost:8080/api
这个本地地址段的前段是跟你本地项目地址一样的,如果端口是8081,那么他也是8081。
此时你会发现他这个http://localhost:8080/api
和你的本地项目在同一个域名下,所以跨域问题就不存在了。
那么我们看下他有哪些配置:
- target 这个就是api地址了,后端给你什么,你就填什么
- ws 默认true就行了
- changeOrigin 默认true
- pathRewrite 这个是重写路径,我们着重讲下这个
pathRewrite 什么意思?
首先我们要知道反代后,我们的请求地址是谁?
请求地址:http://localhost:8080/api
假设我们的登录地址api路径是:/admin/login
那么请求地址就是:http://localhost:8080/api/admin/login
这个地址就对应真实的请求地址:https://www.baidu.com/admin/login
那么我们先比对下没有反代和反代后的api请求地址段:
无反代:https://www.baidu.com/admin/login
反代:http://localhost:8080/api/admin/login
你会发现除却域名和端口,反代他多个api
地址段,而pathRewrite 的作用就是在反代的时候,发送给真实端口请求时,将api
字段去掉。
那么就有人说了,既然是去掉,为什么上面设置的参数为/
,而不是''
空字符呢。
事实上这两种都可以,他们的意思是一样的。所以用谁都可以。
使用体验
测试反代非常好用,当然他还有很多设置,如果你有需要可以自行搜索引擎搜索查看。
反代会将你的请求完整的发送给真实地址段,并且像头信息那些,也是原模原样发送的,所以不用担心反代后,参数不对了。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vue-i18n 的使用方式
vue2与vue3使用的版本以及区别vue2安装:yarn add vue-i18n@8安装8.xx的版本,9.xx是vue3使用的。vue3安装:yarn add vue-i18n区别:vue-i18n@8挂载的时候,是挂载的未实例化的i18对象,vue-i18n@9挂载的是实例化后的i18对象。具体代码后面会有。一些经验i18n的语言文件可以是js,可以是json,ts没测试,然后vue2版他官方例子用的是js,vue3版用的是json,个人测试都可以,所以建议都用json,统一格式。挂载插件的时候,vue2版挂载的是未实例化前的对象,vue3版挂载的是实例化后的对象。多看官方文档,...
vue cli异步路由加载原理
webpack会解析路由文件的引入,就算你是一个setTimeout输出的路由配置文件,或者if else判断的路由配置文件,他都会将你明文书写的路由vue文件打包。为什么?其原理未知,估计并不是解析代码,而且代码关键字的抓取。如果你是一个api返回的路由配置,webpack的无法准确感知到路由文件的是否被引入,所以它的办法是全部都打包,src目录下的所有vue文件全部会被打包成chunk-2d0b30b7.3576daad.js这种格式的文件。其中包裹components目录下的组件,哪怕你的这个组件已经被某个路由页明确引入了,这个路由除了会被打包到这个路由页,还会生成单独的chunk...
vue cli3-cli4 打包后项目在二级路径的方法
默认情况vue的build打包,都是基于根路径来进行的,但是,如果我们将打包的文件放置再二级目录,就会导致文件无法加载,页面空白。原因有两个:路由路径无法正确匹配资源文件路径错误下面我们就来讲讲做法路由配置在路由实例的创建时,我们常常会看到一个base选项,内容如下:const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })base官方有很明确是解释:类型: string 默认值: "/"应用的基路径。例如,如果整个单页应用服务在 /app/ 下...

vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
关于 vue cli 的Network unavailable的问题分析以及修复方式
发现公司的项目,不管是vue2还是vue3,不管是新创建的还是旧项目,启动后Network永远是unavailable;就很离谱,导致每次想要局域网测试,只能手动在devServer中配置public属性,设置一个固定的本地ip地址。但是,你的ip地址并不是别人的ip地址,那么就会导致如果不小心上传了vue.config.js;那么同事一拉,哦吼,不懂得就说,哎呀,我的项目怎么启动不了了。这就很蛋疼了,所以我分析了一下这个问题的原因。首先,我的电脑的环境是没有问题的,网卡也是没有问题的,vue cli早就支持多个网卡了,所以多网卡问题就可以忽略。其实主要原因是因为一个不合法的ipv4地址...

vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
关于element table合并格子的思路
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...
