Vue.js HTTP请求代理配置

Vue.js使用axios向服务器请求数据时，经常报跨域错误

'Access-Control-Allow-Origin' header is present on the requested resource

解决方法：配置代理

在config/index.js中proxyTable添加

proxyTable: {
  '/api': {                               // 要代理的接口名
    target: 'http://192.168.1.1:8080/',   // 要代理的接口地址
    changeOrigin: true,                   // 允许跨域
    pathRewrite: { '^/api': '' }          // 接口名重写
  },

然后在main.js中声明一个全局

Vue.prototype.HOST = '/api'

即可在组件中使用

var url = this.HOST + "/user?";
    this.$axios.get(url, {
    params: {
        name: this.name,  //上传参数到服务器
        id: this.id
    }
    }).then(res => {
        var a =res.data.code;
        console.log(a);  //从服务器取得数据res，这里我们需要data里面的code
      })
    }