当开发前端代码已经编写完毕，后端的接口也已经准备完成，我们就可以进行前后端的联调，由于前端和后端的通信属于跨域，数据的交换是无法实现的，此时我们使用proxyTable实现跨域。
使用方法
vue在配置文件中提供了proxyTable来设置跨域，在config文件夹的index.js文件中
dev: { //开发环境下
// 静态资源文件夹
assetsSubDirectory: 'static',
// 发布路径
assetsPublicPath: '/',
// 代理配置表，在这里可以配置特定的请求代理到对应的API接口
// 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
proxyTable: {
'/api': {
target: 'http://xxxxxx.com', // 接口的域名
// secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/apis': '/api'
}
}
}
此时，在使用axios发送请求，比如下面的情况
export default {
data(){
return {}
},
created(){
this.$axios.get('/apis/health/list').then(res => {
this.data = res.data.message
}
.catch(err => {
console.log(err)
})
}
}
访问地址会被代理到http://xxxxxx.com//api/health/list
实现原理
跨域是浏览器禁止的，服务端并不禁止跨域
所以浏览器发给自己的服务端，然后由自己的服务端再转发给要跨域的服务端，做一层代理
vue-cli的proxyTable用的是http-proxy-middleware中间件
============================分割线=========================
在自己的实践中，发现我的项目里并没有config文件夹，也就是没有配置项。这时由于在vue-cli 3.0+版本中已经对项目目录做了简化，这时我们需要自己手动去创建配置文件。在项目根目录下，创建vue.config.js。再在这个配置文件中写proxyTable配置。
