vue 跨域 proxyTable不生效 解决办法

在网上查了半天，都没行，原来是要把axios再封装一层，再调用就OK了。

1. 修改config目录下的index.js文件

proxyTable: {
  '/':{
    target: 'http://localhost:8080',
    changeOrigin: true,
    ws: true,
    pathRewrite: {
      '^/': ''
    }
  }

2. 在scr目录下新建utils目录，将下面内容保存到api.js文件

import axios from 'axios'

axios.interceptors.request.use(config => {
  return config
}, err => {
  window.console.log({message: '请求超时!'})
  // return Promise.resolve(err);
})

axios.interceptors.response.use(data => {//{data:{status:200,msg"",obj:{}},status:200}
  if (data.status && data.status == 200 && data.data.status == 500) {
    //业务逻辑错误
    window.console.log({message: data.data.msg})
    return
  }
  if (data.data.msg) {
    Message.success({message: data.data.msg})
  }
  return data.data
}, err => {
  if (err.response.status == 504 || err.response.status == 404) {
    window.console.log({message: '服务器被吃了⊙﹏⊙∥'})
  } else if (err.response.status == 403) {
    window.console.log({message: '权限不足,请联系管理员!'})
  } else if (err.response.status == 401) {
    window.console.log({message: err.response.data.msg})
  } else {
    if (err.response.data.msg) {
      window.console.log({message: err.response.data.msg})
    } else {
      window.console.log({message: '未知错误!'})
    }
  }
  // return Promise.resolve(err);
})
let base = ''
export const postKeyValueRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    transformRequest: [function (data) {
      let ret = ''
      for (let it in data) {
        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
      }
      return ret
    }],
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
}
export const postRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'application/json'
    }
  })
}
export const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
}
export const putRequest = (url, params) => {
  return axios({
    method: 'put',
    url: `${base}${url}`,
    data: params,
    headers: {
      'Content-Type': 'application/json'
    }
  })
}
export const deleteRequest = (url) => {
  return axios({
    method: 'delete',
    url: `${base}${url}`
  })
}
export const getRequest = (url) => {
  return axios({
    method: 'get',
    url: `${base}${url}`
  })
}

3. 这样调用

this.postKeyValueRequest('/user/login', {
          name: this.username,
          password: this.password
        }, {
          emulateJSON: true
        }).then(msg => {
          if (msg) {
            alert(JSON.stringify(msg))
            if (msg.code === 200) {
              this.$router.push({
                name: 'home',
                params: {
                  userInfo: msg.data
                }
              })
            } else {
              alert('用户名密码错误')
            }
          }
        })