Web API 過去與未來(五):使用 Proxy 保護 API URL

更新於 發佈於 閱讀時間約 6 分鐘

軟體工程師職涯升級計畫啟動!立即預約職涯諮詢、履歷健檢或模擬面試👈,為您的加薪做好準備!


現代 Web 架構,前後端分離已成常態,但這也讓前端直接與後端 API 互動的風險增加。暴露 API 網址(endpoint)跨來源請求(CORS)問題權限控管,都是開發者必須正面面對的挑戰。

為了解決這些問題,我們可以善用「Proxy(代理伺服器)」作為中介層,攔截、轉發與過濾請求,提供更安全、更彈性的 API 使用方式。


🔍 Proxy 是什麼?為何而設?

Proxy(代理伺服器)是一種常見的設計模式與架構元件,會在**用戶端(Client)目標伺服器(Server)**之間插入一個代理點。無論是系統內部的 microservices,還是使用者與外部 API 的請求,都可以透過 Proxy 來:

  • 遮蔽實際後端 API 位址(URL 隱藏)
  • 統一處理請求與回應(格式、Header、錯誤)
  • 執行權限驗證、轉址、日誌紀錄等
  • 解決跨域(CORS)限制

簡單說,它是一個可以「轉送請求 + 加入中介邏輯」的工具。


💡 Proxy 的應用場景

1. 🚦 API 路由切換

在大型專案中,開發與正式環境的 API 往往部署於不同的網域上。例如:

  • 開發環境(Dev):http://localhost:4000/api
  • 正式環境(Prod):https://api.myapp.com

若將邏輯寫死在前端,將增加維護與測試困難。我們可以透過 Proxy 中介層,讓前端始終只向 /api 發送請求,Proxy 再根據環境自動轉發到正確的後端 API。

2. 🔐 權限驗證與請求過濾

Proxy 可作為 API Gatekeeper,先檢查使用者是否具備存取權限。若無權限,可直接攔截、重新導向或回傳錯誤訊息,減少後端承擔不必要的流量與資源負擔。

3. 🛠️ 統一格式與 Header 處理

常見需求包含:

  • 自動附帶語系、時區等 Header
  • 自動將 Client 傳入參數格式轉換為後端所需格式
  • 統一錯誤處理,避免錯誤資訊洩露

🛠 實作:使用 Node.js 建立 Proxy 中介層

在 Node.js 環境下,我們可透過第三方套件 http-proxy-middleware 搭配 Express 快速實作一個簡易 Proxy:

📦 安裝套件

bash
複製編輯npm install http-proxy-middleware

🧪 基本範例程式碼

js
複製編輯const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use('/api', createProxyMiddleware({
target: 'https://api.example.com',
changeOrigin: true,
pathRewrite: { '^/api': '' },
onProxyReq: (proxyReq, req, res) => {
// 加入語言資訊於 Header
proxyReq.setHeader('Accept-Language', req.headers['accept-language'] || 'en');
},
onProxyRes: (proxyRes, req, res) => {
// 可在此處理後端回應(如統一錯誤格式)
}
}));

app.listen(3000, () => {
console.log('Proxy server is running on http://localhost:3000');
});

🕵️‍♀️ 說明重點

  • target:實際後端 API 網址
  • pathRewrite:將 Client 發送的 /api 前綴移除,使 URL 不外洩
  • changeOrigin:變更 origin 以符合 CORS 檢查
  • onProxyReq / onProxyRes:攔截請求與回應,可植入自定邏輯(如權限檢查、紀錄日誌等)

🔄 支援動態環境切換

可額外撰寫函式根據 process.env.NODE_ENV 動態切換目標 API,例如:

js
複製編輯const getApiTarget = () => {
return process.env.NODE_ENV === 'production'
? 'https://api.example.com'
: 'http://localhost:4000';
};

🔒 Proxy 在安全性上的角色

raw-image

📘 延伸資源


✅ 小結

使用 Proxy 串接 API,不只是為了方便開發、切換環境,更能加強安全控管、統一處理邏輯,是現代前後端分離架構中不可或缺的一環。

下一篇,我們將深入探討 HTTP 快取策略,如何減少請求延遲、提升使用者體驗,別錯過!


📩 喜歡這篇內容嗎?歡迎收藏、轉貼給你正在架構前後端系統的朋友,或留言告訴我你遇到過哪些 API 安全問題。

留言
avatar-img
留言分享你的想法!
avatar-img
跨越國界的程式人生
2會員
32內容數
自學程式,現為網頁開發工程師,同時擔任線上課程講師,專注於幫助自學程式的開發者找到理想工作。熱愛技術與分享,致力於將複雜的概念轉化為實用知識,讓更多人踏入軟體開發的世界。
2025/07/14
本篇文章深入探討 RESTful API 與 GraphQL 兩種主流 API 設計風格的優缺點、適用場景及實作方式,並提供選擇建議,協助開發者根據專案需求做出明智的選擇。文章也涵蓋了 API 快取機制、權限控制、以及常見挑戰等面向。
Thumbnail
2025/07/14
本篇文章深入探討 RESTful API 與 GraphQL 兩種主流 API 設計風格的優缺點、適用場景及實作方式,並提供選擇建議,協助開發者根據專案需求做出明智的選擇。文章也涵蓋了 API 快取機制、權限控制、以及常見挑戰等面向。
Thumbnail
2025/06/26
本篇文章探討 Web API 如何促成前後端分離,以及前後端分離架構的優點。文中說明 API 的概念、Web API 的功能、前後端分離的實作方式,並分析其在程式碼維護性、開發效率、使用者體驗和技術棧方面的優勢。
Thumbnail
2025/06/26
本篇文章探討 Web API 如何促成前後端分離,以及前後端分離架構的優點。文中說明 API 的概念、Web API 的功能、前後端分離的實作方式,並分析其在程式碼維護性、開發效率、使用者體驗和技術棧方面的優勢。
Thumbnail
2025/06/25
本文探討前後端協作模式的演變,從傳統的MVC架構、模板引擎,到前後端分離的RESTful API與GraphQL,以及API認證和Proxy技術。說明前後端分離的優勢,例如提升開發效率、改進使用者體驗等,並解決前後端不分離帶來的問題。
Thumbnail
2025/06/25
本文探討前後端協作模式的演變,從傳統的MVC架構、模板引擎,到前後端分離的RESTful API與GraphQL,以及API認證和Proxy技術。說明前後端分離的優勢,例如提升開發效率、改進使用者體驗等,並解決前後端不分離帶來的問題。
Thumbnail
看更多
你可能也想看
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 什麼是Middleware (中介層)? Middleware 一般翻譯作「中間件」或是「中介軟體」,其實 Express 應用程式就是由一連串的 middleware 串連而成: 從 request 進來到 response 回去會經過一系列的流程。 這個流程會按照路由清單由上而下執行。
Thumbnail
※ 什麼是Middleware (中介層)? Middleware 一般翻譯作「中間件」或是「中介軟體」,其實 Express 應用程式就是由一連串的 middleware 串連而成: 從 request 進來到 response 回去會經過一系列的流程。 這個流程會按照路由清單由上而下執行。
Thumbnail
R036 Blog API 伺服器的維護更新日誌 (2024/04/30) 開發環境技術 語言: Javascript 環境: Node JS 框架: Express.js 本次維護目的 優化及測試API伺服器程運行 重溫程式碼架構以便日後更新優化 Reac
Thumbnail
R036 Blog API 伺服器的維護更新日誌 (2024/04/30) 開發環境技術 語言: Javascript 環境: Node JS 框架: Express.js 本次維護目的 優化及測試API伺服器程運行 重溫程式碼架構以便日後更新優化 Reac
Thumbnail
代理模式通過封裝原始對象來實現對該對象的控制和管理,同時不改變原始對象的行為或客戶端與該對象互動的方式,以此介入或增強對該對象的訪問和操作。
Thumbnail
代理模式通過封裝原始對象來實現對該對象的控制和管理,同時不改變原始對象的行為或客戶端與該對象互動的方式,以此介入或增強對該對象的訪問和操作。
Thumbnail
AWS CloudFront + S3 遇到 CORS 解決方式
Thumbnail
AWS CloudFront + S3 遇到 CORS 解決方式
Thumbnail
之前在【什麼是網路請求(HTTP response)】筆記裡有提到,網路請求遇到 CORS 跨域問題,在開發時可以透過 vite 的反向代理來解決,那麼什麼是反向代理,有反向代理的話是不是也有正向代理呢?
Thumbnail
之前在【什麼是網路請求(HTTP response)】筆記裡有提到,網路請求遇到 CORS 跨域問題,在開發時可以透過 vite 的反向代理來解決,那麼什麼是反向代理,有反向代理的話是不是也有正向代理呢?
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News