Vue中proxyTable配置

關於Vue中使用ajax請求數據時存在跨域問題

Vue在開發中使用的localhost本地服務，而請求的數據則是在服務端http://www.admin.com/php/getData.php，坑定是存在跨域問題，因此須要使用代理來幫我作一些處理來解決跨域問題：

proxyTable: {
  '/api': {
    target: 'http://www.admin.com/', 
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}
複製代碼

pathRewrite中^/api的意思就是把/api，替換成''，把左邊的內容替換成右邊的。

如上圖，target直接寫成http://www.admin/com便可，而後使用一個標識api來替代當前的主機名，在頁面中請求地址寫上 this.$ajax.get('api/getData.php')便可。固然這只是在本地服務能夠的。

相信不少朋友第一次試用的時候也會遇到這樣的問題，打包上線後請求失敗，地址錯誤。不少老司機會教你一個方法，就是在全部接口中把api/刪掉。固然了，這個方法是能夠的，可是一個項目中有好多接口，若是一個一個的去刪除的話，那麼，你一天啥都不用幹了，只去刪接口，而後本地測試你再加回去。 以下圖就是，線上地址多了一個api，怎麼解決呢

proxyTable: {
  '/php': {
    target: 'http://www.admin.com/', 
    changeOrigin: true,
    pathRewrite: {
      '^/php': ''
    }
  }
}

好比還有一個接口http://www.admin.com/php/getMessage.php，
他們中有公共的一個名字，那就是php
把標識中的api使用一個接口中公共的名字，變成入上面代碼同樣，這樣打包上線後你的整個地址就是http://www.admin.com/php/getData.php，就能夠成功訪問了。


勿噴，大神們可能有更好的辦法複製代碼