1. 程式人生 > 實用技巧 >前後端分離_Vue_axios本地跨域(前端localhost:8080到後端localhost:8090)

前後端分離_Vue_axios本地跨域(前端localhost:8080到後端localhost:8090)

  1. 找到vue.config.js
module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:8090', //設定呼叫的介面域名和埠號(預設埠號80)
          changeOrigin: true, //
          pathRewrite: {
            '^/api': ''
          }
               //這裡理解成用‘/api’代替target裡面的地址,
              //後面元件中我們掉介面時直接用api代替 
              //比如我要呼叫'http://40.00.100.100:3002/user/add',
              //直接寫‘/api/user/add’即可
        }
      }
    }
  },
  lintOnSave: false
}

  1. 呼叫例項
  this.$axios
                .get("api/assetPricing/findAll", {
                    params: {},
                })
                .then(res => {
                    // if (res.data.Code == 0) {
                    //     if (res.data.Status == null) {
                    //         this.items = []
                    //     } else {
                    //         this.items = res.data.Status
                    //     }
                    // }
                   window.console.log(res.data);
                })