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))
    }
}