1-6 json-server进阶：mockserver白名单模式&生产接口proxy功能开发
白名单 + Proxy 架构
在实际开发中，部分接口已有后端实现，部分接口尚未开发。需要一种方案：已有接口走真实服务端，未开发接口走 Mock 数据。
前端请求
├── 白名单接口 → 转发到真实服务端（Proxy）
└── 其他接口 → json-server 返回 Mock 数据
text
实现方案
使用自定义 server.js
// server.js
const jsonServer = require('json-server')
const { createProxyMiddleware } = require('http-proxy-middleware')
const server = jsonServer.create()
const router = jsonServer.router('db.json')
const middlewares = jsonServer.defaults()
server.use(middlewares)
server.use(jsonServer.bodyParser)
// 白名单：这些路径转发到真实服务端
const whitelist = [
'/api/users',
'/api/auth'
]
server.use((req, res, next) => {
const isWhitelisted = whitelist.some(path => req.path.startsWith(path))
if (isWhitelisted) {
// 转发到真实服务端
createProxyMiddleware({
target: 'http://localhost:3000',
changeOrigin: true
})(req, res, next)
} else {
next() // 交给 json-server 处理
}
})
server.use(router)
server.listen(3001, () => {
console.log('Mock Server running at http://localhost:3001')
})
javascript
启动自定义服务
node server.js
bash
Express 中间件扩展
由于 json-server 基于 Express，可以使用其生态中的所有中间件：
const cors = require('cors')
const helmet = require('helmet')
server.use(cors())
server.use(helmet())
javascript
自定义路由重写
// routes.json
{
"/api/*": "/$1",
"/v1/posts": "/posts",
"/articles/:id": "/posts/:id"
}
json
json-server db.json --routes routes.json
bash
模拟网络延迟
// 添加延迟中间件
server.use((req, res, next) => {
setTimeout(next, Math.random() * 2000) // 0-2秒随机延迟
})
javascript
模拟错误响应
server.post('/api/orders', (req, res) => {
// 模拟 50% 概率失败
if (Math.random() > 0.5) {
res.status(500).jsonp({ error: '服务端错误' })
} else {
res.status(200).jsonp({ success: true })
}
})
javascript
参考资源
- json-server 自定义路由 - 路由配置
- http-proxy-middleware - 代理中间件
↑