在MSW中如何透传未处理请求同时监听请求与响应？

你可以通过自定义onUnhandledRequest的处理函数来实现需求，不用依赖默认的res.passthrough()，而是自己完成请求转发、响应捕获和返回的全流程：

步骤1：编写自定义处理函数 #

这个函数会接管所有未匹配到Mock规则的请求，完成以下操作：

• 复制原请求的所有信息（方法、头、请求体）
• 转发请求到真实目标地址
• 捕获响应内容并写入文件
• 将响应返回给被测应用（AUT）

示例代码（Node.js环境，使用setupServer）：

const { setupServer } = require('msw/node');
const fs = require('fs').promises;
const path = require('path');

// 自定义未处理请求的处理函数
async function handleUnhandledRequest({ request, response, context }) {
  // 1. 复制原请求的配置
  const fetchOptions = {
    method: request.method,
    headers: request.headers,
    body: request.body,
    credentials: 'include', // 保持凭证，根据需求调整
  };

  try {
    // 2. 转发请求到真实地址
    const realResponse = await fetch(request.url, fetchOptions);

    // 3. 捕获响应内容
    const responseBody = await realResponse.text(); // 或.json()，根据响应类型调整
    const logData = {
      timestamp: new Date().toISOString(),
      request: {
        url: request.url,
        method: request.method,
        headers: Object.fromEntries(request.headers.entries()),
        body: request.body ? await request.text() : null,
      },
      response: {
        status: realResponse.status,
        headers: Object.fromEntries(realResponse.headers.entries()),
        body: responseBody,
      },
    };

    // 4. 写入文件（按时间戳命名避免覆盖）
    const logFileName = `unhandled-request-${Date.now()}.json`;
    await fs.writeFile(path.join(__dirname, 'logs', logFileName), JSON.stringify(logData, null, 2));

    // 5. 将真实响应返回给AUT
    return context.response(
      realResponse.status,
      Object.fromEntries(realResponse.headers.entries()),
      responseBody
    );
  } catch (error) {
    // 处理转发失败的情况，返回错误响应给AUT
    console.error('转发请求失败:', error);
    return context.response(500, {}, JSON.stringify({ error: 'Request forwarding failed' }));
  }
}

步骤2：配置MSW Server时启用自定义处理 #

在创建MSW服务器时，把onUnhandledRequest设置为你刚才写的函数：

const server = setupServer(
  // 这里放你已配置的Mock handlers
  // ...
);

server.listen({
  onUnhandledRequest: handleUnhandledRequest, // 替换默认的passthrough或error
});

注意事项 #

• 如果是浏览器环境使用setupWorker，写入文件的逻辑需要调整（比如用localStorage存储，或者发送到后端服务记录），因为浏览器不能直接操作文件系统。
• 确保请求体的处理逻辑正确：如果原请求是FormData或其他格式，需要对应调整fetchOptions.body的处理方式。
• 可以根据需求调整日志的格式和存储位置，比如合并到一个日志文件，或者添加更多元数据。

内容的提问来源于stack exchange，提问作者Mat Walker