vue-cli配置跨域代理

現在使用vue大多使用了前后端分離模式，因此游覽器經常顯示跨域失敗的信息，現在跨域的方式很多種，主要分兩大類，ajax跨域，dom跨域，具體的方法就不例舉啦。

vue-cli作為一個強大的腳手架，內置了一個簡單的配置型跨域方式

找到目錄下的config文件下，index.js中dev配置對象中的proxyTable屬性，這里是一個對象

下面對這個對象屬性進行解析：

 proxyTable: {
      '/api':{            //這里的key就是axios的baseURL
        target: 'http://127.0.0.1',    //訪問域名
        changeOrigin: true,            //開啟跨域
        pathRewrite:{  // 路徑重寫，
            '^/api': 'api/index.php'  // 替換target中的請求地址
        }
      }
    }

也就是設置axios的baseURL可以只設置為'/api'，然后在proxyTable里面定義匹配這個路徑的代理配置對象，設置target為訪問的域名，設置重寫為訪問域名的后綴，即域名后的地址，然后開啟changeOrigin屬性即可。

注意：配置好后由於這個文件不在src下，不會觸發構建，每次修改需要重新npm run dev 來使用新的配置，此時成功會看到命令行輸出代理服務器配置信息