Skip to content
返回构建教程

网络调试

读实际请求和响应调试 HTTP/CORS/WebSocket 问题，非生成它们的代码。

为什么

网络 bug 在边界——你的 fetch 调服务调另一服务——每边代码孤立看正确。bug 在实际跨线：未发的头、未预期的 CORS 预检、把 POST 变 GET 的 301、实为 text/plain 的 JSON body。读代码告诉你意图；读 Network 标签告诉你发生什么。Network 标签（或非浏览器用 mitmproxy / Charles）是最被低估调试工具——那 30 秒省 1 小时读 fetch 包装。方法：复现调用、检请求+响应头+body、比服务端预期、修不匹配。

何时使用

请求败、返错数据或行为异于代码暗示时。约 15-30 分钟。集成代码永不跳过。

如何做

1. 复现失败请求开 Network 标签（或 mitmproxy）
   - Chrome DevTools → Network → 按 Fetch/XHR 过滤 → 找红行
   - 非浏览器（服务器到服务器）：mitmproxy -p 8080，代码指向它

2. 检实际请求：方法、URL、头、body
   - 比你意图：Content-Type 实为 application/json？Auth 头在？
   - 常见意外：301 重定向 POST → GET，丢 body

3. 检实际响应：状态、头、body
   - 200 带 body 错仍是败；401 带清晰消息是线索
   - CORS：浏览器控制台显精确缺头——读非猜

4. 比实际 vs 预期找不匹配
   - 服务端预期 Authorization: Bearer <token>，客户端发 authorization: <token>（无 Bearer 前缀）
   - 不匹配是 bug；生请求的代码是修点

5. 修并 Network 标签开时验证
   - 不信代码；信线——重检确认请求现匹配

示例

# 浏览器：Chrome DevTools → Network 标签
# 1. 复现失败调用
# 2. 点红行 → Headers 子标签
#   请求头：
#     Content-Type: text/plain;charset=UTF-8   ← BUG：应 application/json
#     （无 Authorization 头）                  ← BUG：忘发 token
#   响应头：
#     Access-Control-Allow-Origin: null        ← CORS 将阻此
# 3. Payload 子标签 → 看实际发 body

# 服务器到服务器：mitmproxy 拦调用
mitmproxy -p 8080
# 然后代码：process.env.HTTP_PROXY = "http://localhost:8080"
# mitmproxy 实时显每请求/响应

# 常见修——fetch 包装丢 Content-Type
// BUG：fetch(url, { body: JSON.stringify(data) })  ← 无 headers
// 修：
await fetch(url, {
  method: "POST",
  headers: { "Content-Type": "application/json", Authorization: `Bearer ${token}` },
  body: JSON.stringify(data),
});

# CORS——读浏览器控制台，它精确告缺什么
# "Access to fetch at 'https://api.x' from origin 'https://app.x' has been blocked
#  by CORS policy: No 'Access-Control-Allow-Origin' header is present"
# 服务端修（非客户端）：API 响应加头

常见问题

  • ⚠读 fetch 包装代码非 Network 标签——包装看似对但中间件重写头。
  • ⚠责 CORS 客户端试图那修——CORS 是服务端响应头，总是。
  • ⚠未注意 301 静默转 POST 为 GET 丢 body——请求'可用'但做错事。
  • ⚠仅检响应 body 非头——bug 常是缺 Set-Cookie 或错 Content-Type。

最佳实践

  • ✓集成工作时保持 mitmproxy 或 DevTools 开——线是事实源非代码。
  • ✓CORS 总修服务端（加 Allow-Origin 头）非客户端——浏览器执服务端策略。
  • ✓服务端 debug 级记全请求（方法、URL、头、body），用户报告含失败精确调用。
  • ✓加集成测试断言实际线级请求（用 nock 或 msw），头回归败 CI 非 prod。