Vue2反向代理

　  前一段時間寫了一個vue2的小項目，用的是vue-cli腳手架搭建的項目，項目裏須要跨域，但又不能使用jsonp，上網查了一下，發現有一個以前沒接觸過的詞語——反向代理。

      什麼是「反向代理」呢？

      首先咱們瞭解一下代理服務器。代理服務器分爲兩種：轉發（forward proxy）代理服務器和反向（reverse proxy）代理服務器。咱們一般說的代理服務器指的就是轉發代理服務器，轉發代理服務器，轉發代理服務器的工做原理是這樣的：咱們在工做中有時須要訪問外網，可是因爲有一些咱們直接訪問是訪問不了的，因此代理服務器就上場了，它就像是一個轉換器，客戶端把本來要發送給服務器的請求發送給代理服務器，而後代理服務器再發送次請求到服務器並接收返回來的內容，最後將這些內容再發送給客戶端，這就是轉發代理服務器扮演的角色。除次以外，代理服務器還有一個做用，就是可以使用緩存來緩解原始服務器負載，提供響應速度。

　  一般的代理服務器，只用於代理內部網絡對Internet的鏈接請求，客戶機必須指定代理服務器,並將原本要直接發送到Web服務器上的http請求發送到代理服務器中。因爲外部網絡上的主機並不會配置並使用這個代理服務器，普通代理服務器也被設計爲在Internet上搜尋多個不肯定的服務器,而不是針對Internet上多個客戶機的請求訪問某一個固定的服務器，所以普通的Web代理服務器不支持外部對內部網絡的訪問請求。當一個代理服務器可以代理外部網絡上的主機，訪問內部網絡時，這種代理服務的方式稱爲反向代理服務。此時代理服務器對外就表現爲一個Web服務器，外部網絡就能夠簡單把它看成一個標準的Web服務器而不須要特定的配置。不一樣之處在於，這個服務器沒有保存任何網頁的真實數據，全部的靜態網頁或者CGI程序，都保存在內部的Web服務器上。所以對反向代理服務器的攻擊並不會使得網頁信息遭到破壞，這樣就加強了Web服務器的安全性。

　  瞭解了什麼是反向代理，咱們再看看它是怎麼在vue中設置。

　  在vue中的config/index中，設置proxyTable參數。以下：

　　

proxyTable: {
  '/api': {
    target: 'http://xxx.com',  //設置你調用的接口域名和端口號
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''   //這裏理解成用‘/api1’代替target裏面的地址，後面組件中咱們掉接口時直接用api代替 好比我要調用'http://40.00.100.100:3002/user/add'，直接寫‘/api/user/add’便可
    }
  }
}

如上配置好proxyTable，在訪問時，用api代替，如：我要調用'http://xxx:3002/user/add'，把proxyTable配置爲target：'http://xxx:3002',訪問時直接寫‘/api/user/add‘便可

vue代理就是 http-proxy-middleware 插件完成的，若是想深刻了解，那就好好看看http-proxy-middleware吧。