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字段去掉。

那么就有人说了,既然是去掉,为什么上面设置的参数为/,而不是''空字符呢。

事实上这两种都可以,他们的意思是一样的。所以用谁都可以。

使用体验

测试反代非常好用,当然他还有很多设置,如果你有需要可以自行搜索引擎搜索查看。

反代会将你的请求完整的发送给真实地址段,并且像头信息那些,也是原模原样发送的,所以不用担心反代后,参数不对了。

0
  • 本文分类:vue 项目实战
  • 本文标签:跨域vuevue clicliproxyCORS
  • 流行热度:已超过 59 人围观了本文
  • 最后更新:2020年10月10日 - 17时54分13秒
  • 发布日期:2020年10月10日 - 17时54分13秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码