Vue 使用proxyTable 实现反向代理原理的初步理解

关于Vue 项目中使用proxyTable 解决跨域的一点理解

本人是前端小白一枚,之前的vue项目中使用过proxyTable 来接解决跨域的问题,今天就自己的一点理解做个记录,方便日后查看:
首先,既然存在跨域问题,那么常用的解决方式之一就是方向代理,使用webpack初始化的vue项目里有一个config文件夹,其中的index.js内有一个配置项 proxyTable 就是用来解决跨域的问题,我配置的代码如下:

	proxyTable: {
	      '/api/**': {
	          target: 'http://bl.7yue.pro/v1',   //表示你跨域请求的接口的域名
	          changeOrigin:true,	
	          pathRewrite:{
	              '^/api':'/'
	       }
      },

上述代码中,target设置的就是将要请求数据的域名,这个设置是包含在api这个对象之中的,因此在我们使用本地服务做代理的时候,在请求的接口url之前,也应该拼接上这个 /api:
下面就是我使用代理的代码:

	axios.defaults.baseURL = "http://localhost:8080/api"     //重点在这个/api

    getLatest(){
      this.request.get('/classic/latest')
      .then(res=>{
        console.log(res);
      })
    }

上述代码中,/api 是必须带上的,此前已经说过,因为 proxyTable 中的配置都包含在 /api 之下,在设置baseurl的时候,不带上这个 /api ,代码就执行不到 proxyTable 底下的 api 里, 自然就找不到设置的代理的目的url,也就是上述的target: ‘http://bl.7yue.pro/v1’ 这个地址.以至于请求拿不到数据.

其实大概的原理就是请求首先发送到本地服务的api下去寻找数据的接口,但是本地服务不存在这个接口,刚好又做了转发,那么再去转发的目标域名下寻找对应的接口.从而实现由本地服务发送请求来解决跨域的问题.