Postman可正常返回数据但React Native调用fetch报Failed to fetch错误如何解决

解决方案 #

• 首先移除GET请求中的冗余body参数：HTTP规范不建议GET请求携带请求体，你代码中body: null属于无效配置，部分底层网络库处理带body的GET请求时，若返回数据量较大容易出现传输中断异常，删除该配置即可。
• 新增响应状态校验与超时配置：你当前的代码没有提前判断HTTP响应状态合法性，也没有设置超时阈值，大响应传输过程中如果出现网络波动会直接抛出异常。修改后的参考代码如下：

let url = "API endpoint";

let headers = {
  Authorization: "working bearer token"
};

// 封装超时逻辑
const fetchWithTimeout = (url, options = {}, timeout = 30000) => {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      reject(new Error('Request timeout'));
    }, timeout);
    fetch(url, options)
      .then(res => {
        clearTimeout(timer);
        resolve(res);
      })
      .catch(err => {
        clearTimeout(timer);
        reject(err);
      });
  });
};

fetchWithTimeout(url, {
  method: "GET",
  headers: headers
})
  .then((response) => {
    // 先校验响应状态是否正常
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => {
    // 打印完整错误信息方便定位
    console.log('Error details:', error.message, error.stack);
  });

• 若调整后仍有大响应失败问题，可更换更稳定的第三方网络库：React Native官方自带的fetch底层依赖原生端网络栈，部分旧版本对大体积响应的适配性较差，可替换为axios或者react-native-blob-util，两者默认对大响应的传输、解析做了兼容处理。
• 原生层适配调整：
  • 安卓端（0.67及以下RN版本）：可在原生层修改OkHttp配置，增大响应缓冲阈值，避免大响应传输时缓冲溢出中断。
  • iOS端：可在原生层将NSURLSession的超时时间调整至30s以上，匹配大响应的传输耗时。

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