React Native中x-www-form-urlencoded请求仅在开启调试器网络检查或Postman中生效的问题排查与解决

我之前也碰到过完全一样的问题，核心原因是React Native原生环境下的fetch对URLSearchParams作为请求体的处理逻辑，和调试模式（通过Chrome网络层转发）不一致：

• 开启React Native Debugger网络检查时，请求其实是通过Chrome的网络模块发送的，它能正确识别并序列化URLSearchParams实例，同时保证Content-Type头和请求体格式完全匹配；
• 关闭调试后，React Native自身的fetch实现对URLSearchParams的支持存在兼容性问题，导致请求体没有被正确序列化成后端能解析的x-www-form-urlencoded格式，后端自然找不到token参数，抛出缺失错误。

具体解决方案 #

针对你的代码，只需要做一个关键修改：确保请求体是序列化后的字符串，而非直接传递URLSearchParams实例：

export async function htmlClient2(
  redirectUrl: string,
  { urlEncodedBody, headers: customHeaders, ...customConfig }: RequestConfig = {} 
): Promise<string> {
  const headers = new Headers({
    'Content-Type': 'application/x-www-form-urlencoded',
    Accept: 'text/html',
    ...customHeaders
  })
  
  // 关键修改：将URLSearchParams转换为标准表单字符串
  const requestBody = urlEncodedBody instanceof URLSearchParams 
    ? urlEncodedBody.toString() 
    : urlEncodedBody;

  const config: RequestInit = {
    method: 'POST',
    ...customConfig,
    headers,
    credentials: 'include',
    body: requestBody
  }
  return fetch(redirectUrl, config).then(async response => {
    const data = await response.text()
    if (response.ok) {
      return data
    } else {
      return Promise.reject(data)
    }
  })
}

额外排查建议 #

如果修改后仍有问题，可以用抓包工具（比如Charles）对比两种模式下的请求差异：

• 检查Content-Type头是否确实为application/x-www-form-urlencoded，有没有被自定义头意外覆盖；
• 查看请求体内容是否是token=xxx这样的标准键值对格式，而非异常序列化结果；
• 确认credentials: 'include'是否影响了请求头传递（不过调试时正常，这个可能性很低）。

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