Vue---vue-cli 中的proxyTable解決開發環境中的跨域問題

　　使用vue+vue-cli+axios+element-ui開發後臺管理系統時，遇到一個問題，後臺給了一個接口，我這邊用axios請求數據，控制檯老是報405錯誤和跨域錯誤

　　錯誤 405？ 沒見過！！ 查了一下資料， 錯誤405表示--用來訪問本頁面的HTTP謂詞不被容許，謂詞指的就是GET、POST 和 HEAD等。說白了就是請求的方法不被容許！但是，我是徹底按照後臺給的接口文檔寫的啊

 this.$http({
          method: 'POST',
          url: 'auth/login',
          data: {
            'username': this.username,
            'password': this.password
          }
        }).then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })

　　（注：$http是我本身封裝好的axios    Vue.prototype.$http = axios）

　　問題出來哪裏呢？

　　我又看了一下控制檯的Network，headers信息顯示以下：

 

　　明明寫的是POST請求，怎麼到瀏覽器「嘴裏」就變成OPTIONS？  OPTIONS又是什麼東西？

　　繼續查。。。。   簡單來講，OPTIONS是正式請求以前的一次「預查詢」，瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及能夠使用哪些HTTP動詞和頭信息字段。只有獲得確定答覆，瀏覽器纔會發出正式的XMLHttpRequest請求，不然就報錯。

　　結果顯而易見了，由於存在跨域，瀏覽器先發出一次「預查詢」，查詢不經過，返回HTTP 405 錯誤 ，接着跨域也失敗，返回跨域失敗結果。

　　怎麼解決這個問題呢？

　　　　經過查詢資料，vue-cli的proxyTable能夠解決跨域.

　　　　很簡單，在項目目錄裏找到config文件夾，而後找到index.js，找到proxyTable選項

　　　　設置成：

　　

proxyTable: {
      '/api': {
    target: 'http://baidu.com',
    pathRewrite: {
      '^/api': ''
    }

　　簡單解釋一下： ‘/api’ 是 url的別名   target指的是要代理的url  其餘照着填就好。

　　在axios使用：

　　

 this.$http({
          method: 'POST',
          url: '/api/auth/login',
          data: {
            'username': this.username,
            'password': this.password
          }
        }).then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })

　　在控制檯顯示：

　　

 

　　　　這就搞定了！

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　----- 2017-06-26 22：30