React Native中fetch请求报TypeError: Network request failed如何排查

调用指定URL接口获取数据时，抛出Network request failed报错，同一URL在Postman工具中可正常访问，Postman运行结果截图如下：

const getCategories = async () => {
  try {
    const url = "*******/api/categories/getRandomCategories/4"
    await fetch(url, {
      method: 'GET'
    }).then((res) => console.log(res.json()))
      .then((resJson) => {
        console.log(resJson)
      }).catch((e) => console.log(e))
  } catch (error) {
    console.log(error)
  }
}

• 跨域（CORS）策略拦截
  Postman作为独立接口调试工具，不受浏览器同源策略限制，只要接口网络连通就能正常拿到响应；但前端代码运行在浏览器环境下时，如果服务端没有配置当前前端页面域名的跨域允许规则，浏览器会直接拦截请求，抛出网络类报错，不会进入正常响应处理逻辑。
  解决方法：协调后端为接口配置正确的Access-Control-Allow-Origin等CORS响应头；本地开发阶段可以通过构建工具的devServer代理转发接口请求，绕过浏览器跨域限制。
• HTTPS/HTTP混合内容拦截
  如果前端页面是通过HTTPS协议加载，但调用的接口是HTTP协议，浏览器会默认拦截这种不安全的混合资源请求，直接抛出网络错误，Postman无此类安全限制所以可以正常访问。
  解决方法：将接口升级支持HTTPS协议；本地调试时可临时关闭浏览器对应混合内容拦截规则（仅可用于本地调试，生产环境不可使用该方案）。
• 请求代码写法存在缺陷
  当前代码混用async/await和Promise.then链式写法，逻辑冗余且存在断裂问题：第一个then中直接打印res.json()，但res.json()本身是返回Promise的异步方法，代码没有将该Promise返回给后续then链，会导致链式调用逻辑异常，部分场景下会触发未捕获错误。
  修正后参考写法：

  const getCategories = async () => {
    try {
      const url = "*******/api/categories/getRandomCategories/4"
      const res = await fetch(url, { method: 'GET' })
      // 提前校验响应状态，避免200外的状态码进入后续逻辑
      if (!res.ok) throw new Error(`请求异常，状态码：${res.status}`)
      const resJson = await res.json()
      console.log(resJson)
      return resJson
    } catch (error) {
      console.log('请求错误：', error)
    }
  }
  

• 本地网络/插件拦截
  广告拦截类浏览器插件、系统防火墙、企业网络网关规则都可能拦截浏览器发出的特定请求，Postman走的网络链路和浏览器不完全一致，就会出现Postman请求正常但浏览器侧报错的情况。
  解决方法：打开浏览器开发者工具的Network面板，查看对应请求的详细日志；临时关闭浏览器插件、切换无特殊规则的网络环境测试。
• 请求头缺失被服务端拦截
  部分接口会校验特定请求头（比如Referer、自定义鉴权头、Content-Type），Postman发请求时会默认携带一组通用请求头，而fetch的默认请求头如果不符合接口校验规则，会被服务端直接断开连接，抛出网络错误。
  解决方法：对照Postman中成功请求的Headers配置，在fetch的headers配置项中补全接口要求的必填请求头。

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