VUE跨域問題

vue-cli項目中，解決跨域問題。

在config > index.js 文件中的proxyTable裏邊添加'/api'配置

proxyTable: {
  '/api': {
    // 跨域域名
    target: 'http://www.xxxxx.cn',
    // 是否跨域
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},

在vue組件中使用

methods: {
    // 加載數據
    getUserInfo () {
      this.$axios.get('api/mall/servlet/json?funcNo=3040')
      // this.$axios.get('http://www.xxxxx.cn/mall/servlet/json?funcNo=3040')
        .then(this.handleGetUserInfoSucc)
        .catch(error => console.log(error))
    }
}

須要從新運行項目，否則會報錯

從新運行項目後本地開發就不會出現跨域問題了。

當項目打包，放到服務器上，會報錯

Failed to load resource: the server responded with a status of 404 (Not Found)

開發的時候用的dev_server只針對開發用的，打包後dev_server這塊配置的請求代理已經無效。

這時直接將域名放到get中，打包放到服務器

methods: {
    // 加載數據
    getUserInfo () {
      // this.$axios.get('api/mall/servlet/json?funcNo=3040')
      this.$axios.get('http://www.xxxxx.cn/mall/servlet/json?funcNo=3040')
        .then(this.handleGetUserInfoSucc)
        .catch(error => console.log(error))
    }
}