木灵鱼儿

木灵鱼儿

阅读：1367

最后更新：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
木灵鱼儿

木灵鱼儿

发布了 615 篇文章获得点赞 0获得阅读 1367

版权申明

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

one
two
three

关于作者

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

相关文章

vue-i18n 的使用方式vue-i18n 的使用方式
设计模式的7个设计原则设计模式的7个设计原则
第六章 设计模式第六章 设计模式
第五章 代码复用模式第五章 代码复用模式
第四章 对象的创建第四章 对象的创建