使用MSW与Redux Toolkit时无法获取请求体的问题

核心问题与修复方案： #

• 修正Mock请求方法
  实际请求是POST，但你的Mock代码用了rest.get，这会导致Mock逻辑不匹配。将Mock改为rest.post：

  rest.post('url/endpoint', async (req, res, ctx) => {
    // 后续处理逻辑
  })
  

• 正确解析URLSearchParams请求体
  MSW中req.body是URLSearchParams实例，直接打印无法看到具体键值对，需通过以下方式解析：

  • 逐个获取字段：

    const paramName = await req.body.get('paramName');
    

  • 转换为普通对象（推荐）：

    const bodyObj = Object.fromEntries(await req.body);
    console.log('完整请求体：', bodyObj);
    

• 统一Content-Type（可选优化）
  你代码里设置了Content-Type: application/json，但使用URLSearchParams作为body时，浏览器会自动将Content-Type改为application/x-www-form-urlencoded。若想保持一致，可将body改为JSON字符串：

  // 实际请求代码修改
  getMyQuery: builder.query<bodyType, paramsType>({
    query: (qParams) => ({
      url: `url/endpoint`,
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(qParams),
    }),
  }),
  

  此时Mock中解析请求体需改为：

  const bodyObj = await req.json();
  

完整Mock示例 #

rest.post('url/endpoint', async (req, res, ctx) => {
  const bodyParams = Object.fromEntries(await req.body);
  console.log('完整请求体：', bodyParams);

  return res(
    ctx.status(200),
    ctx.json({ message: 'everything is fine', status: 'success' })
  );
}),

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