使用Whistle自定义接口返回内容：Mock流式JSON数据全解析

一.mock接口返回数据流程

定位目标接口

在Whistle的Network面板中找到需要Mock的接口，右键点击请求信息，选择COPY -> URL复制完整URL，确保URL路径精确到具体接口。

准备Mock数据

1. 点击对应接口，在右侧面板切换到response标签页，点击body查看原始返回内容
2. 进入Whistle的Values管理页面，创建新文件
   • 建议文件名与接口关联（如api-data-mock.json）
   • 文件格式根据接口类型选择（JSON数据推荐使用.json后缀）
3. 将原始返回内容粘贴到新文件中，按需修改数据字段
   • 支持修改静态值、添加测试数据、调整结构
   • 特别注意保留数据原有格式和关键字段

配置基础Mock规则

https://example.com/api/data file://mockData.json

• 左侧为目标接口 URL（支持通配符）
• 右侧指向 Values 中创建的 Mock 文件
• 保存规则后立即生效

二.处理流式 JSON 数据的特殊要求

问题分析

按上述步骤设置mock数据后，查看接口返回内容，body已经成功变成设置的值，但是页面无法正常加载出来，仔细研究发现是响应头的问题，流式json数据对应的头部是
content-type：text/event-stream;charset=UTF-8
但是直接mock返回的数据对应的头部是
content-type：text/plain;charset=UTF-8

解决方案：增加自定义响应头

明确问题所在后，只需要再增加头部配置即可，values新建个文件（如contentHeader.json），存储相应头部信息（根据实际修改）

{"server": "whistle","content-type": "text/event-stream; charset=utf-8","content-length": 13316,"access-control-allow-credentials": true,"access-control-allow-origin": "xxx"
}

然后在rules中增加规则
https://example.com/api/data resHeaders://{contenHeader.json}
再次触发接口，就可以正常返回并记载流式json数据了。

最终配置

# 设置响应头
https://example.com/api/data resHeaders://{contenHeader.json}
# 设置mock数据
https://example.com/api/data file://{mockData.json}

注意：如果rules中还有重定向接口url的规则，一定要将需要mock数据的接口的规则放在最前面，否则会被覆盖无法生效