vue跨域配置

一.什么是跨域
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

二.解决方式： ProxyTable

proxyTable的底层使用了http-proxy-iddleware（https://github.com/chimurai/http-proxy-middleware），它是http代理中间件，它依赖node.js，基本原理是用服务端代理解决浏览器跨域：

三.实例中具体实现：
1.Main.js添加一行：

Vue.prototype.HOME = '/api'

2.index.js第14行proxyTable:{}大括号中添加如下:

'/api': { // 接口配置代理，解决跨域
target: 'http://xzishiying.yuezhix.com/', 
secure: false, // false为http访问，true为https访问
changeOrigin: true, // 跨域访问设置，true代表跨域
pathRewrite: { // 路径改写规则
'^/api': '' // 以/proxy/为开头的改写为''
}
}

3.调不同域名接口测试

this.$axios({
method:'get',
url:this.HOME+'/workbench/subject'
}).then((response) =>{ //这里使用了ES6的语法
console.log(response) //请求成功返回的数据
}).catch((error) =>{
console.log(error) //请求失败返回的数据
})

控制台里的效果：