React Native (with expo) fetch with FormData Network error on Android only答案

【问题标题】：React Native (with expo) fetch with FormData Network error on Android onlyReact Native (with expo) fetch with FormData Network error on Android only
【发布时间】：2020-04-02 08:40:42
【问题描述】：

当我尝试使用 fetch 和 FormData 在 POST 中使用 React native（expo SDK 37）进行 fetch API 调用时，一切都在 IOS 上完美运行，但在 Android 上会出现网络错误： [TypeError: Network request failed]。如果我使用 axios 而不是 fetch，我会遇到同样的错误（网络错误）。

如果我用空的 {} 替换 formData，它可以工作。我已经检查了模拟器和物理设备（具有各种 Android 版本），我尝试使用标题但没有结果。而且我的 API 有一个有效的让我们加密证书

let url = 'https://my-prod-server/webservice';

let formData = new FormData();
formData.append('test1','test1');
formData.append('test2','test2');

let request = await fetch(url, {
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'multipart/form-data',
  },
  method: 'POST',
  body: formData,
})
.then(response => response.json())
.catch(error => console.log('API ERROR: ', error));

return request;

【问题讨论】：

我也有同样的问题，你解决了吗？
没办法，用json代替...

标签： android react-native fetch expo form-data

【解决方案1】：

我在 expo SDK 38 上尝试使用 fetch 和 FormData 发布图像时遇到了同样的问题。请求在 iPhone 上成功，而在 Android 上失败并显示 [TypeError: Network request failed]。经过进一步调查，我发现我的请求根本没有到达服务器，问题似乎只与使用 FormData 有关。带有 FormData 的请求可能超时/被拒绝并导致错误。当我遇到一篇提到 XMLHttpRequest 的帖子时，我浪费了大量时间寻找答案并尝试实施建议的解决方案，但没有任何帮助。在这种特殊情况下，我最终使用 XMLHttpRequest 而不是 fetch，它在 Android 设备和 iPhone 上都像 FormData 一样工作。

如下声明一个函数，并将之间的值替换为合适的值

function sendXmlHttpRequest(data) {
  const xhr = new XMLHttpRequest();

  return new Promise((resolve, reject) => {
    xhr.onreadystatechange = e => {
      if (xhr.readyState !== 4) {
        return;
      }

      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject("Request Failed");
      }
    };
    xhr.open("POST", <apiEndpoint>);
    xhr.setRequestHeader(<headerName>, <value>);
    xhr.send(data);
  });
}

现在在你的代码中的某个地方，创建一个新的 FormData 对象并附加任何相关的字段/信息，然后最后调用 sendXmlHttpRequest 函数来处理请求。

const photoData = new FormData();
photoData.append("photo", {
  uri: <uri of the photo>,
  name: filename,
  type: "image/jpeg"
});

const response = await sendXmlHttpRequest(photoData);

【讨论】：