[INFO] JavaScript Fetch拦截器技巧：Node.js请求劫持

• 时间: 2024-12-19
• 类型: 技术技巧/代码片段
• 来源: 开发实践
• 置信度: 9/10
• 标签: #JavaScript #Node.js #fetch #拦截器 #调试技巧

核心用途

通过全局 fetch 拦截器，在不修改源代码的情况下劫持特定API请求并返回模拟响应。

拦截器代码

const originalFetch = globalThis.fetch;
globalThis.fetch = async function (...args) {
  // 非字符串URL直接放行
  if (!args[0] || typeof args[0] !== "string") {
    return await originalFetch.apply(this, args);
  }
  // 拦截特定请求
  if (args[0].includes("/v1/rgstr")) {
    return Response.json({ ok: true });
  }
  // 其他请求正常处理
  return await originalFetch.apply(this, args);
}

使用方式

方式1：一步创建文件

touch /tmp/interceptor.js && cat > /tmp/interceptor.js << 'EOF'
const originalFetch = globalThis.fetch;
globalThis.fetch = async function (...args) {
  if (!args[0] || typeof args[0] !== "string") {
    return await originalFetch.apply(this, args);
  }
  if (args[0].includes("/v1/rgstr")) {
    return Response.json({ ok: true });
  }
  return await originalFetch.apply(this, args);
}
EOF

方式2：使用拦截器运行应用

node -r /tmp/interceptor.js --no-warnings --enable-source-maps your-app.js

技术要点

实用场景

扩展：请求日志版本

const originalFetch = globalThis.fetch;
globalThis.fetch = async function (...args) {
  console.log('[FETCH]', args[0]);  // 记录请求
  const response = await originalFetch.apply(this, args);
  console.log('[RESPONSE]', response.status);  // 记录状态
  return response;
}

注意事项

与知识库的关联

技术模式

这是一种代理/装饰器模式的实际应用：

• 保留原始功能（originalFetch）
• 在调用前后添加逻辑
• 对调用方透明

可迁移场景

关联

• 相关: INFO-20251219-057（AI Coding工具链）
• 相关: INFO-20251219-061（Claude Code基础设施）
• 触发规则: -
• 待验证: -