木灵鱼儿

木灵鱼儿

阅读：1827

最后更新：2020/10/10/ 17:54:13

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和你的本地项目在同一个域名下，所以跨域问题就不存在了。

那么我们看下他有哪些配置：

  1. target 这个就是api地址了，后端给你什么，你就填什么
  2. ws 默认true就行了
  3. changeOrigin 默认true
  4. 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 项目实战
文章标签 跨域vuevue clicliproxyCORS
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 1827

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1827

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译