通过 Fetch React Native Post Request 引发网络请求失败

Question

我遇到了以下错误。 目前我正在使用 React Native 开发一个 Android 应用程序，因此我计划使用 fetch 为我做一个发布请求。

fetch("https://XXreachable-domainXX.de/api/test", {
    method: "post",

    body: JSON.stringify({
      param: 'param',
      param1: 'param',

    })
  })
  .then((response) = > response.json())
  .then((responseData) = > {
    ToastAndroid.show(
      "Response Body -> " + JSON.stringify(responseData.message), ToastAndroid.SHORT
    )
  })
  .catch((error) = > {
    console.warn(error);
  });

该应用程序现在抛出一个错误：

TypeError：网络请求失败

当我将代码更改为 GET-Request 时，它工作正常，在浏览器中使用 window.alert() 作为返回它很酷，而且 Chrome 扩展 Postman 也可以正确返回数据。

Answer 1

这个 React Native 的错误是相当无用的，所以你需要先得到实际的底层错误。 最直接的方法是编写一个小型本机程序，该程序将使用HttpsURLConnection执行相同的查询。

对我来说，实际错误是java.security.cert.CertPathValidatorException: Trust anchor for certification path not found. 它有一个众所周知的解决方案： https ://developer.android.com/training/articles/security-ssl.html#MissingCa

鉴于浏览器和邮递员对请求没有问题，这很可能也是您的情况。 要检查它，请运行openssl s_client -connect XXreachable-domainXX.de:443 -showcerts 。 如果有证书错误，请先修复它们，这样可以节省您编写本机程序的时间。

编辑：实际上，查看所有底层 android 错误的最简单方法是在终端中运行“adb logcat”

Answer 2

在设备上使用 Windows OS/PHP 内置服务器/react-native Android 进行开发：

• 检查服务器本地 IP 地址 ( ipconfig )，例如 172.16.0.10
• 在 react-native fetch中使用这个 URL 和正确的端口（ fetch('http://172.16.0.10:8000/api/foo) ）
• 使用此特定 IP 而不是 localhost 运行 PHP 内置服务器： php -S 172.16.0.10:8000 ...
• 关闭专用网络的 Windows 防火墙

这为我解决了 Android 手机和本地服务器之间的连接问题。

Answer 3

其他答案都没有帮助我。 问题是headers ：

旧标题：

fetch(API_HOST, {
                method: 'POST',
                headers: {
                    Accept: 'application/json'
                },
                body: JSON.stringify(data),

更新的标题：

fetch(config.API_HOST, {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json'  // I added this line
                },
                body: JSON.stringify(data),

Answer 4

如果您遇到此错误并且您确定一切正常并且您正在运行模拟器，只需关闭模拟器并再次启动它。

它现在应该运行。

这通常发生在您将系统休眠一段时间后

Answer 5

step1> 在 AndroidManifest.xml 中添加 android:usesCleartextTraffic="true" 行，如：

// 添加这一行 ... step2> 从您的 android 文件夹中删除所有调试文件夹..

Answer 6

我在 android 模拟器上做同样的事情时遇到了一个大问题。 在 iOS 上，必须在 info.plist 中批准域。 需要明确的是，我试图登录到我的 .NET Web 托管 API。

解决方法是确保帖子数据被参数化。（我很确定这是一个词）

export const loginUser = ({ userName, password }) => {
const data = `UserName=${userName}&Password=${password}&grant_type=password`
    return (dispatch) => {
        dispatch({ type: LOGIN_USER })

        fetch(URL_LOGIN, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: data
            // body: {

            //     UserName: userName,
            //     Password: password,
            //     grant_type: 'password'

            // }

        })
            .then((response) => { 
                loginUserSuccess(dispatch, response)
            })
            .catch((response) => {
                loginUserFailed(dispatch, response)
            })
    };
};

Answer 7

如果您在模拟器上遇到此问题，请确保您也在设备上对其进行测试。 它很可能不会在那里发生。

只是让你知道如果你能解决它，没有什么可担心的。

Answer 8

由于证书过期，我在 Android 上遇到了这个问题。 我收到的错误消息是com.android.org.bouncycastle.jce.exception.ExtCertPathValidatorException: Could not validate certificate: Certificate expired at Fri Sep 29 16:33:39 EDT 2017 (compared to Fri Dec 08 14:10:58 EST 2017) 。

我能够使用digicert.com确认这一点。

不幸的是，我确实不得不深入研究 React Native 代码并调试捆绑包(index.android.bundle)中的 XHR 代码，以便找到错误消息和有问题的 URL，因为它在我的一些日志记录代码中，我显然也没有登录到控制台。 :)

这个 GitHub 问题评论帮助了我。

Answer 9

重新启动模拟器后问题已解决

Answer 10

我在使用 fetch 时遇到了同样的问题，这是一个类型错误。所以尝试使用 axios。这对我有用。

//无效的代码.. //错误：[typeError：网络请求失败]

  return fetch(addProduceApi, { method: 'PATCH', body: bodyParamData, headers: getAuthHeader() }).then((response: any) => response.json()) .catch((error: any) => console.log('Error in patchProduce: ', error));

//工作代码

   return axios.patch(addProduceApi,produceData,{ headers: getAuthHeader()}) .then((response: any) => response.json()) .catch((error: any) => console.log('Error in patchProduce: ', error));?

Answer 11

检查以下两种情况

1. 错误的终点
2. 互联网连接：真实设备，虚拟设备

由于第二个原因，它已经吃了 2 个小时。