vue-cli 3.0的跨域問題解決和對axios路徑配置

描述

最近一個項目，調節口的時候，出了這個問題，然後配了下，記錄下，也有個地方可以保存。

直接上實現步驟

在vue.config.js的module.exports = {}裏面新增一個節點，如果沒有這個節點，在項目根目錄新建一個即可。

上代碼

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://xxxx/', //對應自己的接口，就是你請求的那個域名
        changeOrigin: true, //開啓代理：在本地會創建一個虛擬服務端，然後發送請求的數據，並同時接收請求的數據，這樣服務端和服務端進行數據的交互就不會有跨域問題
        ws: true,  // 是否啓用websockets
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

注意點

注意點就是axios的配置問題

開啓跨域後要注意一個問題，就是你axios請求的時候，請求的路徑要注意了。

axios.get('/api/域名後面路徑', function (res) { 
   console.log(res) 
   })

相當於/api代替了你之前的那個域名

當然你可以把這個/api配置成你的請求的baseURL ,後面打包部署時好處理。方便你部署下打包時的路徑。

axios.defaults.baseURL='/api'

ok! 跨域就解決了！

個人水平有限，有問題歡迎大家留言指導，僅供學習和參考。

學海無涯！努力二字，共勉！