正向代理 & 反向代理

Sigmund null on Unsplash

帶著這樣的疑問，我在網路上找到一篇用「租房」來說明正向／反向代理的文章：【終於有人把正向代理和反向代理解釋明白了！】，內容相當詳細好懂，對轉職人來說真是太棒了，這篇筆記也是基於該文章整理而成的唷～

既然是以租房為範例，首先我們要知道稍後會出現的幾個角色：

• 租客 (開發者/使用者)
• 房東 (目標伺服器)
• 二房東 (代理伺服器)、房仲 (代理伺服器)

正向代理

情境：
租客向房仲(代理伺服器)詢問物件，並由房仲來進行帶看，但房東並不會知道看他房子的人(開發者/使用者)是誰

正向代理是伺服器(仲介)代理了「用戶端」(租客)去和「目標伺服器」(房東)進行交互

正向代理的用途：

• 如果有重複的請求，可以從暫存(cache)取資料，加快速度 (房仲可以多次帶看)
• 突破或減少網域限制 (假設房仲手上案源多，就不會受限於單一房東)
• 隱藏使用者IP位置，減少攻擊 (房東不知道租客訊息)

反向代理

情境：
房東將物件交給親戚朋友(代理伺服器)來進行洽談帶看，租客(開發者/使用者)並不知道真正的房東是誰，會認為自己接洽的就是房東(目標伺服器)

反向代理是伺服器(二房東)代理了「目標伺服器」(房東)去和「用戶端」(租客)進行交互

反向代理用途：

• 如果有重複的請求，可以從暫存(cache)取資料，加快速度 (二房東一樣可以多次帶看)
• 負載均衡 (房東很忙，又不想委託第三方，於是請認識的親友來幫忙分擔)
• 隱藏服務器IP位置，充當防火牆，減少攻擊 (租客不知道房東訊息)

正向代理 & 反向代理 比較

正向代理和反向代理看起來都是用戶和目標伺服器之間的橋樑，都可以提高訪問速度，但兩者還是有所區別的，透過表格比較會更加清楚些：

了解兩者差異之後，回到 vite proxy 上吧，在開發階段，前端會使用 vite 創建的虛擬伺服器去 call 後端的 API，這時候虛擬伺服器和後端伺服器處於不同的伺服器位置，而產生了跨域問題，vite proxy 可以幫我們把 API 的路徑(例如：http://localhost:5173/api/bar) 換成真實的後端 API 網址(https://google.com/api/bar)。

也就是 vite 伺服器(租客) 在不知道房東(後端伺服器)真實身份的情況下，一樣可以獲取 API 的數據資料，這就是 vite 的反向代理囉！至於 vite proxy 代理的實作方式，直接參考官方文件就可以了～

其他參考資料：

【正向代理與反向代理】、【Vite 配置代理 Proxy】

我是Amber，前端學習中，歡迎交流討論🧸