webpack之proxyTable設置跨域----vue

      現在的公司是前後端分離開發，這樣不可避免會遇到一個問題-------跨域。之前在用jq開發的時候都是讓後臺加Access-Control-Allow-Origin:*。但是即使是這樣，瀏覽器請求的時候還是會有兩個請求，一個option，一個真正的post/get請求，真的很煩。接觸了angular和vue以後才知道可以用代理來處理。

在項目中，可以看到config/index.js文件中，dev下面的proxyTable爲空：

 更改爲：

 proxyTable: {
    '/api': {
      target: 'http://www.abc.com',  //目標接口域名
      changeOrigin: true,  //是否跨域
      secure: false, // 允許https請求      
      pathRewrite: {
        '^/api': '/api'   //重寫接口
      }
    }

更改這個文件，npm是不會自動更新的，所以這會去調接口會報404。把現在的進程停掉，重新npm run dev一下再去調接口就好了。

proxyTable配置的意思爲：使用字符串"/api"來代替目標接口域名；如果接口地址爲"user/getUserInfo",我們可以在所有的接口地址前面加上"/api/"用於設置代理；如:

'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/api/user/getUserInfo'

如果你不想每次請求地址中都帶有"/api/",則可以設置

 pathRewrite: {
    '^/api': ''   // 後面可以使重寫的新路徑，一般不做更改
 }

表現結果爲：

'http://localhost:8080/api/user/getUserInfo' ===> 'http://www.abc.com/user/getUserInfo'