android - 仅在 Android 上使用 FormData 网络错误获取 React Native(带 expo)

Question

当我尝试使用 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;

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