仅在 Android 上使用 React Native（带有 expo）获取 FormData 网络错误

Question

当我尝试使用 fetch 和 React Native（expo SDK 37）在 POST 中进行 fetch API 调用时FormData，一切在 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;

Answer 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);