Vue项目前后端联调（使用proxyTable实现跨域）

当开发前端代码已经编写完毕，后端的接口也已经准备完成，我们就可以进行前后端的联调，由于前端和后端的通信属于跨域，数据的交换是无法实现的，此时我们使用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配置。