前端Mock服务进阶：结合http-proxy-middleware实现动态数据模拟
项目地址: https://gitcode.com/gh_mirrors/ht/http-proxy-middleware 在前端开发过程中，你是否经常遇到后端接口未 ready 导致开发阻塞？是否在联调阶段因真实数据不可控而难以测试边界场景？本文将介绍如何使用 http-proxy-middleware 构建灵活的动态 Mock 服务，通过拦截代理请求返回自定义数据，完美解决前后端协作中的数据依赖问题。读完本文你将掌握：基础代理配置、响应拦截与数据改写、多场景 Mock 策略以及在 Express/Next.js 等框架中的实战应用。
核心原理与基础配置
http-proxy-middleware 是一个轻量级的 Node.js 代理中间件（Middleware），它能将特定请求转发到目标服务器，并允许在转发过程中对请求和响应进行拦截处理。其核心优势在于：无需修改前端代码即可切换数据源，支持细粒度的请求匹配规则，以及强大的响应改写能力。
安装与基础使用
通过 npm 安装依赖：
npm install http-proxy-middleware --save-dev
基础代理配置示例（examples/express/index.js）：
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
// 将 /api 请求代理到目标服务器
app.use('/api', createProxyMiddleware({
target: 'https://jsonplaceholder.typicode.com',
changeOrigin: true, // 调整请求头中的 Host 字段以匹配目标服务器
pathRewrite: { '^/api': '' } // 移除请求路径中的 /api 前缀
}));
app.listen(3000, () => {
console.log('Mock 服务运行在 http://localhost:3000');
});
响应拦截与动态数据生成
通过 responseInterceptor 插件可以拦截代理响应并返回自定义 Mock 数据，这是实现动态模拟的核心能力。以下是一个完整示例，将用户列表请求拦截并返回模拟数据：
实现响应拦截（examples/response-interceptor/index.js）
const { createProxyMiddleware, responseInterceptor } = require('http-proxy-middleware');
const mockUsers = [
{ id: 1, name: '前端开发者', role: 'admin' },
{ id: 2, name: '产品经理', role: 'user' }
];
app.use('/users', createProxyMiddleware({
target: 'https://jsonplaceholder.typicode.com',
selfHandleResponse: true, // 启用手动响应处理
on: {
proxyRes: responseInterceptor(async (buffer, proxyRes, req, res) => {
// 修改响应状态码
res.statusCode = 200;
// 返回模拟数据（覆盖原始响应）
return JSON.stringify(mockUsers);
})
}
}));
关键配置解析
| 参数 | 作用 | 必要性 |
|---|---|---|
selfHandleResponse: true | 禁用自动响应处理，允许手动控制响应 | 必须 |
responseInterceptor | 接收原始响应 buffer 并返回新内容 | 核心 |
res.statusCode | 可自定义 HTTP 状态码（如模拟 401/404 错误） | 可选 |
多场景 Mock 策略
1. 条件路由（基于请求参数动态切换数据源）
利用 router 配置实现多目标代理：
createProxyMiddleware({
target: 'https://default-api.com',
router: (req) => {
// 测试环境路由
if (req.query.env === 'test') {
return 'https://test-api.com';
}
// 本地 Mock 路由
if (req.query.mock === 'true') {
return 'http://localhost:4000'; // 指向本地 Mock 服务
}
return 'https://prod-api.com';
}
});
2. 延迟模拟（测试加载状态）
通过 delay 配置模拟网络延迟：
createProxyMiddleware({
target: 'https://api.com',
delay: 1000 // 延迟 1 秒返回响应
});
3. 错误注入（测试异常处理）
在响应拦截器中随机返回错误：
responseInterceptor(async (buffer, proxyRes, req, res) => {
// 10% 概率返回 500 错误
if (Math.random() < 0.1) {
res.statusCode = 500;
return JSON.stringify({ error: '模拟服务器错误' });
}
return buffer; // 返回原始响应
});
框架集成实战
Express 全流程示例
完整项目结构参考 examples/express/，核心代码：
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
// 用户相关接口 Mock
app.use('/api/users', createProxyMiddleware({
target: 'https://jsonplaceholder.typicode.com',
selfHandleResponse: true,
on: {
proxyRes: responseInterceptor(async () => {
return JSON.stringify([/* 模拟用户数据 */]);
})
}
}));
// 产品列表接口代理（真实数据）
app.use('/api/products', createProxyMiddleware({
target: 'https://real-api.com',
changeOrigin: true
}));
app.listen(3000);
Next.js 集成方案
在 Next.js 中通过 API 路由实现代理（examples/next-app/PROXY.md）：
- 创建
pages/api/_proxy.ts：
import { createProxyMiddleware } from 'http-proxy-middleware';
import type { NextApiRequest, NextApiResponse } from 'next';
export const config = {
api: {
bodyParser: false // 禁用内置解析器（避免影响代理请求体）
}
};
export default function handler(req: NextApiRequest, res: NextApiResponse) {
const proxy = createProxyMiddleware({
target: 'https://api.com',
changeOrigin: true,
pathRewrite: { '^/api/_proxy': '' }
});
return proxy(req, res);
}
- 前端请求示例：
// 调用代理接口
fetch('/api/_proxy/users')
.then(res => res.json())
.then(data => console.log(data));
项目实战与最佳实践
推荐项目结构
/mock
/data # 静态 Mock 数据 JSON 文件
users.json
products.json
/middleware # 自定义拦截器
errorInjector.js
logger.js
server.js # Mock 服务入口
性能优化建议
- 缓存静态响应：对不变的 Mock 数据进行内存缓存
- 批量代理配置：使用配置文件集中管理代理规则
- 开发热重载：结合 nodemon 实现配置文件修改后自动重启
总结与扩展
通过 http-proxy-middleware 构建的 Mock 服务具有以下优势：
- 无侵入性：无需修改前端代码即可切换数据源
- 灵活性高：支持细粒度的请求匹配与响应控制
- 框架无关：可集成到 Express/Next.js/Koa 等任意 Node.js 框架
官方提供了更多高级用法示例，可参考：
掌握这些技巧后，你可以告别传统的静态 Mock 方式，构建更接近真实场景的动态模拟环境，大幅提升前端开发与测试效率。
下期预告：将介绍如何结合 Docker 实现 Mock 服务的容器化部署，以及如何与 CI/CD 流程集成实现自动化测试。如果觉得本文对你有帮助，欢迎点赞收藏！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
