一.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數據的接口的規則放在最前面，否則會被覆蓋無法生效