关于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"//重点在这个/apigetLatest(){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下去寻找数据的接口,但是本地服务不存在这个接口,刚好又做了转发,那么再去转发的目标域名下寻找对应的接口.从而实现由本地服务发送请求来解决跨域的问题.
