React Native发起API请求返回必填参数缺失错误如何解决

核心排查方向 #

• 补全JSON请求头标识
  fetch发送application/json格式的POST请求时，必须显式在headers中声明Content-Type，绝大多数服务端框架未检测到该头时，不会自动解析请求体中的JSON数据，会判定无参数传入。
  修正后的基础请求代码如下：

fetch('https://api.dotcomkart.com/api/homePagePropertyList', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      skip: 0,
      limit: 10,
      module_type: 'buy',
      section: 'liveability'
    }),
})

注意原URL末尾多余的问号也建议删除，避免不必要的解析异常。

• 校验参数传递位置是否匹配
  如果加了请求头仍然报错，需要确认接口的参数接收规则：
  • 部分POST接口要求参数拼接在URL查询参数中，而非放在请求体里，此时需要把参数拼在?后面，不要放在body中
  • 部分接口只接收form-data或x-www-form-urlencoded格式的参数，不支持JSON格式，此时需要把参数转成对应格式传递，不要用JSON.stringify处理请求体
• 校验参数取值/格式合法性
  • 核对section传值liveability是否存在拼写错误、大小写不匹配、前后多余空格的问题，确认和接口要求的枚举值完全一致
  • 核对module_type取值buy是否在接口允许的枚举范围内
  • 确认limit、skip的类型是否为数字，没有被误转为字符串
• 抓包验证实际请求内容
  使用Charles、Fiddler或者React Native自带的网络调试工具，查看实际发出的请求详情：
  • 确认请求头、请求方法、请求URL和接口要求一致
  • 确认请求体内容和你预期传入的参数一致，没有序列化错误
  • 确认没有网关拦截、代理篡改等问题导致请求参数丢失

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