1 Node 中間件核心
1.1 為什么開發環境需要 Node 代理？
在前端開發中，我們常遇到：前端運行在localhost:3000，后端 API 在localhost:4000，跨域導致請求失敗。而傳統解決方案有以下局限性：
-
修改后端 CORS 配置：需后端開發配合，增加溝通成本；生產環境與開發環境配置不一致。
-
配置 Nginx 反向代理：修改配置后需重啟服務，打斷開發流程；配置文件管理復雜。
Node 中間件代理（如http-proxy-middleware）可在前端開發服務器中直接配置跨域代理，無需修改 Nginx，適合開發階段使用。Node 中間件代理有以下優勢：
-
開發效率提升：前端獨立配置，無需等待后端調整
-
熱更新支持：修改代理規則后無需重啟服務器
-
環境隔離：開發環境專用配置，不影響生產部署
-
調試便利：可攔截、修改請求 / 響應內容
1.2?http-proxy-middleware
http-proxy-middleware?是一個用于 Node.js 的中間件，它可以在你的應用中創建一個反向代理。這在處理跨域請求、添加負載均衡、或者在開發環境中連接到不同的服務等場景中非常有用。
1.2.1?安裝 http-proxy-middleware
可以使用 npm 或者 yarn 來安裝這個包：
# 使用 npm 安裝
npm install http-proxy-middleware --save-dev# 或使用 yarn
yarn add http-proxy-middleware --dev1.2.2 核心使用模式
你可以使用?createProxyMiddleware?函數來創建一個代理。這個函數接收一個配置對象，你可以在這個對象中指定代理的目標、路徑重寫規則等選項：
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');const app = express();// 代理所有以 /api 開頭的請求
app.use('/api',createProxyMiddleware({target: 'http://localhost:4000', // 后端服務地址changeOrigin: true, // 修改請求頭中的 hostpathRewrite: { '^/api': '' }, // 重寫請求路徑logLevel: 'debug', // 調試日志onProxyReq: (proxyReq, req, res) => { // 請求攔截器console.log(`轉發請求: ${req.method} ${req.url}`);},onProxyRes: (proxyRes, req, res) => { // 響應攔截器console.log(`接收響應: ${proxyRes.statusCode}`);}})
);app.listen(3000, () => {console.log('開發服務器運行在 http://localhost:3000');
});1.2.3 配置選項詳解
| 選項 | 類型 | 描述 | 默認值 |
|---|---|---|---|
target | string | 后端服務的目標地址（必填） | - |
changeOrigin | boolean | 修改請求頭中的?Host?為目標地址，解決部分服務器的跨域限制 | false |
pathRewrite | object/function | 重寫請求路徑，支持正則表達式替換 | {} |
secure | boolean | 是否驗證 SSL 證書 | true |
logLevel | string | 日志級別：debug/info/warn/error | info |
onProxyReq | function(proxyReq, req, res) | 請求發送前的回調函數，可修改請求頭或請求體 | - |
onProxyRes | function(proxyRes, req, res) | 響應返回后的回調函數，可修改響應頭或響應體 | - |
onError | function(err, req, res) | 代理過程中出錯時的回調函數 | - |
timeout | number | 請求超時時間（毫秒） | 0（無超時） |
headers | object | 添加自定義請求頭 |
2 實戰案例
以在 Express 中配置 http-proxy-middleware 為例。
2.1 安裝依賴
npm install express http-proxy-middleware2.2 前端開發服務器（servera.js）
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();// 靜態資源服務（前端頁面）
app.use(express.static('public'));// 配置API代理
app.use('/api', createProxyMiddleware({target: 'http://localhost:4000', // 后端API地址changeOrigin: true, // 修改請求頭host為target域名，解決跨域pathRewrite: {'^/api': '' // 去除URL中的/api前綴}
}));app.listen(3000, () => {console.log('前端開發服務器運行在 http://localhost:3000');
});2.3?后端 API 服務器（serverb.js）
const express = require('express');
const app = express();
const users = [{ id: 1, name: '張三' }];app.get('/users', (req, res) => {res.json(users);
});app.listen(4000, () => {console.log('后端API服務器運行在 http://localhost:4000');
});2.4 前端請求（index.html）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>a</title>
</head><body><script>// 定義一個立即執行的異步函數(async function () {try {// 使用 fetch API 發送 GET 請求到指定的 URLconst response = await fetch('http://localhost:3000/api/users', {// 指定請求方法為 GETmethod: 'GET',// 指定請求頭，表明期望的響應格式為 JSONheaders: {'Accept': 'application/json'}// 使用 then 方法將響應對象轉換為 JSON 格式}).then(response => response.json())// 打印獲取到的響應console.log('response ',response);} catch (error) {// 如果有任何錯誤，打印錯誤信息console.error('Error:', error);}// 立即執行上述定義的函數})();</script>
</body>
</html>Node 中間件代理是前端開發階段的 “跨域神器”，無需修改后端代碼，只需在前端服務器配置即可解決跨域問題，大幅提升開發效率。
下一章將介紹 window.name?方案 ，敬請期待！
)
