AI时代下的前端开发利器，零侵入式接口Mock工具
作为常年深耕前端开发的工程师，在对接 AI 类项目、实时数据流场景时，我被市面上的 Mock 工具「卡了脖子」—— 尤其是主流的 Apifox，在 SSE 流式接口模拟上暴露了诸多难以忍受的问题：
- Apifox 对 SSE（Server-Sent Events）流式接口支持薄弱，无法模拟真实的「逐字推流」效果
- 推流速度固定死，无法精细化调整，还原不了 ChatGPT 式的实时打字体验
- 团队协作时配置同步繁琐，Mock 数据版本混乱
- 侵入式配置需要修改前端代码，切换真实 / Mock 环境成本高
- 调试时接口响应速度慢，反复等待拖慢开发节奏
后端还没交付接口，前端却要先验证流式交互逻辑；调优页面体验时，推流速度没法自定义；团队共享 Mock 配置时，来回导文件效率极低…… 既然没有趁手的工具，那就自己「Vibe Coding」造一个！这款零侵入式 Mock 工具，正是为解决这些真实开发痛点而生。
🚀 核心功能亮点
1. SSE流式接口Mock
完全模拟真实的SSE流，支持精细化的推流速度控制：
- 自定义初始延迟时间：模拟网络延迟或服务端处理时间
- 精确配置消息推送间隔：从1ms到任意时长，完美模拟不同场景下的流速度
- 动态调整推送频率：支持根据需求实时修改推送速度
- 支持循环播放事件：模拟持续的数据流推送
- 可视化管理SSE事件：直观配置每个事件的内容和推送时机
2. 团队间配置共享
- 一键导出/导入配置
- 局域网内无缝访问
- 配置自动持久化存储
- 多环境同步管理
3. 零侵入式Mock
- 无需修改前端代码
- 支持REST API和SSE接口
- 支持条件匹配不同场景
📦 快速开始
# 克隆项目
git clone https://gitcode.com/liuguolin/apiMockServer
cd apiMockServer
# 启动服务
npm start
# 访问管理面板
http://localhost:3000/
🎨 可视化配置界面
管理面板提供了直观的配置界面：
- REST API配置：自定义路径、方法、延迟、响应
- SSE流配置：可视化编辑事件内容、精确设置推送间隔、控制循环模式
- 推流速度实时调整：通过滑块或输入框实时调整推送频率，即时生效
- 接口列表：查看所有已配置的接口
- 配置导入/导出：团队共享配置
🔧 条件Mock配置
条件Mock允许根据请求参数、请求体、请求头等信息，返回不同的响应结果，实现更灵活的场景模拟。
📡 局域网共享
服务启动后会自动显示局域网访问地址：
Mock Server running at:
Local: http://localhost:3000
Network: http://192.168.1.100:3000
团队成员可以通过网络地址访问同一套Mock配置，实现团队协作。
接口测试
接口配置完成后，可点击Test进行在线测试
浏览器页面请求转发配置
xswitch-v3 插件使用指南
要实现浏览器页面请求自动转发到Mock服务，我们推荐使用 xswitch-v3 插件，这是实现零代码侵入Mock的关键工具。
什么是 xswitch-v3？
xswitch-v3 是一款Chrome浏览器插件，基于原先的XSwitch v2版本升级，支持最新的Chrome版本。它可以通过灵活的自定义规则，实现网页资源的代理、转发和替换，是前端开发的重要辅助工具。
安装方法
- 访问 Chrome 应用商店：xswitch-v3
- 点击「添加至Chrome」按钮安装插件
- 安装完成后，在Chrome扩展栏中找到xswitch-v3图标
配置步骤
- 打开配置界面：点击xswitch-v3图标，选择「选项」进入配置页面
- 添加转发规则：
- 点击「添加规则」按钮
- 设置「匹配模式」：输入需要转发的接口路径，如
https://api.example.com/* - 设置「目标URL」：输入Mock服务的地址，如
http://localhost:3000/* - 保存规则配置
- 启用规则：确保规则处于开启状态
验证配置
- 启动Mock服务：
npm start - 打开需要测试的网页
- 浏览器的请求会自动转发到Mock服务
- 在Mock服务的管理面板中可以看到请求记录
🚀 立即体验
这个API Mock Server已经在多个项目中得到验证，是前端开发的必备工具。无论你是开发AI应用、实时数据系统还是普通的Web应用，它都能为你提供稳定、灵活的Mock服务。
👉 立即下载体验，让前端开发更加高效！
License：MIT
如果你觉得这个工具对你有帮助，欢迎Star支持！
