Vue開發解決Axios網略請求跨域問題

後端的相關項目BOOT2.0處理的差不多了，基本上沒什麼大問題。最近在學習前端VUE+Vant移動端組件庫遇到了跨域網略請求的問題，藉此做個筆記；

首先項目是VUE，項目腳手架不可缺少的是vue-cli，一切準備就緒，接下來看我的表演；

(1) 找到項目下的文件夾config,打開config文件夾裏面的index.js文件。通過搜索 proxyTable 節點找到它，如果沒有可以在dev節點下新建此節點，截圖和代碼如下；

proxyTable: {
  '/api': {
    target: 'http://v.XXXX.cn',  //主機ip
    changeOrigin: true,//是否跨域
    secure :false,//http是否加s
    pathRewrite: {
      '^/api': '/'              //重寫路徑，這裏面的值可以這樣寫也可以用其他字符，用其他字符需要修改請求地址IP後面要加這個字符，例；IP/自定義字符/接口地址
    }
  }
},

上面這段代碼的意思就是用/api替代http://v.XXXX.cn網絡請求的主機IP，這段代碼配置好可以這樣請求接口數據

原請求方式：axios.get("http://api.XXXX.com/v2/movie/top250")
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})

替換後方式：axios.get("/api/v2/movie/top250")
.then(res=>{
    console.log(res)
})
.catch(err=>{
    console.log(err)
})

上面配置完成，測試沒問題就可以進行下一步；

同一個文件夾下的開發環境dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST:'/api/'
})

同一個文件夾下的生產環境prod.env.js

module.exports = {
  NODE_ENV: '"production"',
  API_HOST:"http://v.XXXX.cn"
}

本文僅解決VUE開發時跨域問題，如果你和後臺關係比較鐵的話，可以和後臺商量一下修改後臺接口代碼。如有不正確之處歡迎批評指正互相探討。