[VUE] vue配置反向代理解決跨域

正向代理與反向代理

正向代理： 在客戶端和原始服務器(origin server)之間架設一個代理服務器，爲了從原始服務器取得內容，客戶端向代理髮送一個請求並指定目標(原始服務器)，而後代理向原始服務器轉交請求並將得到的內容返回給客戶端。客戶端必需要進行一些特別的設置才能使用正向代理。

反向代理： 反向代理（Reverse Proxy）方式是指以代理服務器來接受網絡上的鏈接請求，而後將請求轉發給內部網絡上的服務器，並將服務器上獲得的結果返回給請求鏈接的客戶端，此時代理服務器對外就表現爲一個反向代理服務器。客戶端無需作任何配置。

在先後端分離的網站架構中，服務器常常要配置反向代理，使前端經過固定地址訪問後端接口，這樣後端服務能夠採起負載均衡等性能優化措施，對前端應用透明。

假設前端服務器地址爲：http://127.0.0.1:8080，後端實際服務地址爲：http://server/web-service/userList ，因爲涉及到跨域的問題，前端沒法直接發http請求給此地址，只能發送同域下的api請求例如：http://127.0.0.1:8080/api/userList， 經過上文介紹，咱們瞭解到須要在前端服務器上配置反向代理，實現將api請求轉發至後臺服務器的目的。

實現

配置：config/index.js中的proxyTable

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) {
 });
複製代碼

注意： 以上面代碼設置的爲例，會把請求中全部帶有/api字段的都替換掉，例如api/getMenu/api，先後兩個都會被替換，致使404等錯誤，在代理數量比較多的時候容易出現這個問題。

以上配置只是在開發環境（dev）中解決跨域。要解決生產環境的跨域問題,則在config/dev.env.js和config/prod.env.js裏也就是開發/生產環境下分別配置一下請求的地址API_HOST，開發環境中咱們用上面配置的代理地址api，生產環境下用正常的接口地址。配置代碼以下：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',     //開發環境
  API_HOST:"/api/"
})
複製代碼

module.exports = {
  NODE_ENV: '"production"',      //生產環境
  API_HOST:'"http://40.00.100.100:3002/"'
}
複製代碼

原理

瀏覽器是禁止跨域的，可是服務端不由止，在本地運行npm run dev等命令時其實是用node運行了一個服務器，IP與後端不一致，因此會產生跨域問題，須要使用如JSONP、跨域代理等手段進行跨域請求，而vue已經幫咱們配置好了，只須要設置一下proxyTable就行。所以proxyTable其實是將請求發給本身的服務器，再由服務器轉發給後臺服務器，作了一層代理，由於不會出現跨域問題。

底層

vue-cli採用http-proxy-middleware插件來進行代理服務器等各項配置。