vue伺服器代理proxyTable設定如何解決跨域

2022-04-14 13:00:27

伺服器代理proxyTable設定解決跨域

1、Proxy代理作用

proxy代理作用：前端伺服器代理的作用是，告訴伺服器任何未知請求（沒有匹配到靜態檔案的請求），代理到一個另一個地址，從而解決跨域的問題。

2、常見情況

前端在向後端進行資源請求的時候，後端若沒有使用Cros中介軟體，則會出現跨域問題，解決問題的辦法之一就是前端使用Proxy進行伺服器代理。

3、應用方式

在使用vue-cli2建立的vue專案時，在config資料夾下的index.js檔案中，可以在dev相關設定資訊中的proxyTable裡對一個或者多個伺服器進行代理。

注：

proxyTable是vue-cli提供解決vue開發環境下跨域的方法，proxyTable的底層使用了http-proxy-middleware，他是http代理中介軟體，他依賴node.js，基本原理是用伺服器代理解決跨域瀏覽器跨域。

有時候在開發的時候，我們請求的後代介面和vue不在同一個域名產生了跨域，而後臺伺服器並未開啟cors，這個時候需要設定proxyTable解決跨域問題。

4、具體設定範例

proxyTable:{
  //'api'就等於target，在連結裡存取/api等同於http:/182.xx.xx.xx:8888/
'/api':{
target:'http://182.xx.xx.xxx:8888/',     //伺服器的介面地址
secure:ture,                           //如果是https，需要開啟這個選項
changeOrigin:ture,                    //是否跨域請求？ture
pathRewrite:{
  '/^api':'api/' 
                    //如果真實介面裡包含了/api，就需要這樣設定
                    //等價於/^api=/api+api==http://182.xx.xx.xxx:8888/api
}
}
}

5、設定思路

在某次網路請求完整路徑為 '/api/ynai/static/ai/'的時候，出現了跨域的問題，之後需要再前端對該網路請求進行一次伺服器代理

具體設定如下：

①首先代理標誌名，必須與請求路徑中頭部一致，範例程式碼如下：proxyTable：{ '/api' : { } }

②設定target引數，確定請求代理的伺服器根路徑，程式碼範例如下：

③根據需要確定ws（websocket代理）的布林值

④設定changeOrigin，賦值為ture，允許跨域

⑤根據需要設定pathRewrite引數

若最終代理後的路徑中不需要/api，那麼需要設定pathRewrite的引數對路徑進行重寫為 ' '

代理原理：

假設有如下代理設定：

則：

1、發生網路請求時，代理組態檔會去正則匹配網路請求路徑，是否與代理匹配（比如發生的請求為/aaa/static/ai/，代理設定了 '/aaa ',則匹配成功）

2、匹配成功後，代理設定生效，他將會請求/aaa/static/ai/,經過代理設定指定的方式處理，最後拼接到target指向的伺服器根路徑（http：//www.baidu.com/）後面

3、最終形成完整的請求路徑（http：//www.baidu.com/static/ai），跨域問題也得以解決

小結： 前端進行伺服器代理設定的視乎，必須保證代理組態檔能夠匹配到axious請求的url，才能正確的將target指向的伺服器地址與url拼接得到完整的跨域請求路徑，進而才能夠請求到遠端的資源。

Vue.proxyTable是什麼？

在vue專案中的config資料夾下的index檔案中有一個proxyTable節點。

proxyTable是vue-cli腳手架在開發模式下，為我們提供的一個跨域的代理中轉伺服器服務。它是基於http-proxy-middleware外掛的。

為什麼會有proxyTable存在？

在我開發我的畢業設計：一個基於vue+springboot的手機交易網站的時。因為我採用前後端分離，前端用的是node伺服器，後端用的是tomcat伺服器。因此，因為埠不一樣所以涉及跨域。

正常情況下，無法通過ajax向後臺請求到資料。因為跨域，瀏覽器的同源策略，截獲了這次資料的返回。

解決方法：

1、伺服器開啟cors。

2、用代理伺服器中轉一下（vue請求的還是自己的後臺，讓後臺去請求需要資料的後臺，然後再將資料返回給vue。

倘若我們無法從後臺設定cors來進行跨域支援。那我們就只能通過設定proxyTable來進行跨域了。

設定proxyTable

proxyTable跨域的基本原理：

在開發模式下，webpack會為我們提供一個http代理伺服器。我們請求介面的時候，實際上是請求的webpack提供的這個http代理伺服器。在由這個代理伺服器請求真實的資料伺服器。最後資料經由webpack代理伺服器。最後轉交給vue程式。

為什麼加個代理伺服器就可以了？

因為代理伺服器不是瀏覽器，沒有同源策略限制。

proxyTable: {
      // 這裡設定 '/api' 就等價於 target , 你在連結裡存取 /api === http://localhost:54321
      '/api': {
        target: 'http://localhost:54321/', // 真是伺服器的介面地址 // http://localhost:54321/json.data.json,
        secure: true, // 如果是 https ,需要開啟這個選項
        changeOrigin: true, // 是否是跨域請求?肯定是啊,不跨域就沒有必要設定這個proxyTable了.
        pathRewirte: {
          // 這裡是追加連結,比如真是介面裡包含了 /api,就需要這樣設定.
 
          '/^api': 'api/', 
          // 等價於 
          // step 1  /api = http://localhost:54321/
          // step 2 /^api = /api + api == http://localhost:54321/api
        }
      }
     },

總結。

1、proxyTable就是webpack在開發環境中給我們提供的的一個代理伺服器。

2、目的是為了在伺服器不方便開啟跨域功能的時候，我們也能方便的在開發階段傳送ajax跨域請求。

3、真實發布環境中讓後臺開啟cors就好。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。