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, // 修改请求头中的 host
pathRewrite: { '^/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 请求到指定的 URL
const response = await fetch('http://localhost:3000/api/users', {
// 指定请求方法为 GET
method: 'GET',
// 指定请求头，表明期望的响应格式为 JSON
headers: {
'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 方案 ，敬请期待！