JavaScript前端模拟后端接口的核心是“不改业务代码、只加一层拦截”，常用方案包括Mock.js运行时拦截、vite-plugin-mock代理式Mock及Express自建服务，分别适用于原型开发、工程化项目和复杂场景。
JavaScript 在前端模拟后端接口，核心是“不改业务代码、只加一层拦截”，让开发阶段的请求自动返回预设数据。关键不是写假接口，而是让真实请求被悄悄接管——这比等后端快得多，也比手动造 JSON 灵活得多。
用 Mock.js 拦截 XHR/Fetch 请求（轻量快速）
Mock.js 最常用的方式是运行时拦截浏览器原生请求，适合中小型项目或快速验证。
- 安装：
npm install mockjs --save-dev（开发依赖即可） - 新建
mock/index.js，统一定义接口规则：
/mock/index.js
import Mock from 'mockjs';
<p>// 模拟 GET 列表接口（带分页、随机中文名、头像）
Mock.mock('/api/users', 'get', {
code: 200,
data: {
list: Mock.mock({ 'list|10': [{ 'id|+1': 1, 'name': '@cname', 'avatar': '@image(40x40)' }] }),
total: 127
}
});</p><p>// 模拟 POST 登录（支持参数解析和逻辑判断）
Mock.mock('/api/login', 'post', (options) => {
const { username, password } = JSON.parse(options.body);
return username === 'admin' && password === '123456'
? { code: 200, token: Mock.Random.guid() }
: { code: 401, message: '登录失败' };
});
- 在入口文件（如
main.js或main.ts）中仅开发环境加载：
// main.js
立即学习“Java免费学习笔记（深入）”；
if (import.meta.env.DEV) {
import('./mock');
}
- 业务代码完全不用改：照常用
axios.get('/api/users')或fetch('/api/users')，Mock.js 会自动匹配并返回数据 - ⚠️ 注意：Mock.js 默认只拦截
XMLHttpRequest；若项目主用fetch，需配合 fetch-mock 或升级到支持 fetch 的方案（如 vite-plugin-mock）
用 Vite / Webpack 插件做代理式 Mock（推荐工程化项目）
把 Mock 当成一个独立服务跑在本地端口（如 https://www.php.cn/link/ecf0f13c45ae9b1787dd211283ee4cb0），前端开发服务器通过 proxy 把 API 请求转发过去。好处是：零侵入业务代码、支持完整 HTTP 特性（状态码、Header、延迟）、方便团队共享规则。
- Vite 用户可装
vite-plugin-mock：
vite.config.ts
import { defineConfig } from 'vite';
import { viteMockServe } from 'vite-plugin-mock';
<p>export default defineConfig({
plugins: [
viteMockServe({
mockPath: 'mock', // 存放 .ts/.js 文件的目录
localEnabled: true, // 开发时启用
prodEnabled: false, // 生产禁用
injectCode: <code> import { setupProdMockServer } from './mock/_createProductionServer'; setupProdMockServer(); </code>,
})
]
});
- 在
mock/user.ts中写标准接口定义（TypeScript 友好）：
mock/user.ts
export default [
{
url: '/api/users',
method: 'get',
response: ({ query }) => {
const { page = 1, pageSize = 10 } = query;
return {
code: 200,
data: {
list: Array.from({ length: +pageSize }).map((_, i) => ({
id: +page * 10 + i + 1,
name: Mock.Random.cname(),
createdAt: Mock.Random.date('yyyy-MM-dd HH:mm:ss')
})),
pagination: { page: +page, pageSize: +pageSize, total: 1000 }
}
};
}
}
];
- 启动后，所有发往
/api/*的请求都会被重定向到 mock 服务，前端无需任何额外引入或条件判断
用 Node.js + Express 自建 Mock 服务（灵活可控，适合复杂场景）
当需要模拟鉴权流程、多步骤状态流转、文件上传、WebSocket 或对接 Swagger 文档时，自建服务最可靠。它本质就是一个精简后端，但只负责返回数据。
- 初始化一个独立服务：
npm init -y && npm install express cors mockjs
server.js
const express = require('express');
const cors = require('cors');
const Mock = require('mockjs');
<p>const app = express();
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));</p><p>// 模拟登录后返回 token，并设置响应头
app.post('/api/login', (req, res) => {
const { username, password } = req.body;
if (username === 'test' && password === '123456') {
res.set('X-Auth-Token', Mock.Random.guid());
res.json({ code: 200, token: Mock.Random.guid(), user: { id: 1, name: '测试用户' } });
} else {
res.status(401).json({ code: 401, message: '认证失败' });
}
});</p><p>// 模拟网络延迟（调试 Loading 态）
app.get('/api/slow-data', (req, res) => {
setTimeout(() => {
res.json(Mock.mock({ 'list|5': [{ 'id|+1': 1, title: '@ctitle(10)' }] }));
}, 1500);
});</p><p>app.listen(3001, () => console.log('Mock server running on <a href="https://www.php.cn/link/ecf0f13c45ae9b1787dd211283ee4cb0">https://www.php.cn/link/ecf0f13c45ae9b1787dd211283ee4cb0</a>'));
- 前端开发时，配置 webpack/vite 的 devServer.proxy 或 axios baseURL 指向
https://www.php.cn/link/ecf0f13c45ae9b1787dd211283ee4cb0 - 所有接口行为（状态码、Header、延迟、跨域）都由服务端控制，贴近真实后端体验
选型建议与避坑提醒
别为了 Mock 而增加维护成本。选对方式比写得漂亮更重要：
- 单人小项目、赶原型 → 直接用 Mock.js + 入口引入，5 分钟搞定
- Vue/Vite/React 工程化项目 → 优先用 vite-plugin-mock 或 webpack-plugin-mock，规则集中、热更新、易 Git 管理
- 需要模拟登录态、权限跳转、错误重试、多环境契约 → 上 Express 自建服务，配合 OpenAPI 定义更佳
- 避免把 Mock 逻辑混进业务代码；禁止在生产构建中打包 Mock 文件（务必用环境变量控制）
- Mock 数据尽量贴近真实结构（字段名、嵌套层级、空值/数组边界），否则联调时容易翻车
