React Native Post 通过 Fetch 请求抛出网络请求失败

Question

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

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: Network request failed

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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 4

检查以下两种情况

错误的终点
互联网连接：真实设备、虚拟设备

第二个原因已经吃了2个小时

Answer 5

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

现在应该运行。

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

Answer 6

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

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

Answer 7

由于证书过期，我在 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，因为它在我的一些日志代码中，我显然也没有登录到控制台。 :)

我得到了 this GitHub issue comment 的帮助。

Answer 8

第一步> 在 AndroidManifest.xml 中添加 android:usesCleartextTraffic="true" 行，例如：

// 添加这一行 ... 步骤2> 从 android 文件夹中删除所有调试文件夹..

Answer 9

None 以上答案对我有帮助。问题是 headers:

旧header:

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

已更新header：

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

React Native Post 通过 Fetch 请求抛出网络请求失败

React Native Post Request via Fetch throws Network Request Failed

javascript

android

react-native

fetch-api