Vue跨域實現原理（proxytable）

1.1、使用proxyTable代理

文件路徑如下，在項目根目錄下的config文件夾中的index.js中

配置代碼如下

dev{
	proxyTable: {
      '/api': {
        target: 'http://192.168.0.1:200', // 要代理的域名
        changeOrigin: true,//允許跨域
        pathRewrite: {
          '^/api': '' // 這個是定義要訪問的路徑，名字隨便寫
        }
   }
}

使用時代碼

 // /api/getMenu相當於*http://192.168.0.1:200/getMenu
 // /api相當於http://192.168.0.1:200
 this.$http.get("/api/getMenu", {
 }
 .then(res => {
 })
 .catch(function(error) {
 });

1.2、注意事項

以上面代碼設置的為例，會把請求中所有帶有/api字段的都替換掉，例如api/getMenu/api，前后兩個都會被替換，導致404等錯誤，在代理數量比較多的時候容易出現這個問題。

2、proxyTable原理

瀏覽器是禁止跨域的，但是服務端不禁止，在本地運行npm run dev等命令時實際上是用node運行了一個服務器，因此proxyTable實際上是將請求發給自己的服務器，再由服務器轉發給后台服務器，做了亦曾代理，因為不會出現跨域問題。