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

Posted 2023-02-22

【中文标题】通过 Fetch React Native Post Request 引发网络请求失败

【英文标题】：React Native Post Request via Fetch throws Network Request Failed

【发布时间】：2016-04-06 19:53:12

【问题描述】：

我遇到了以下错误。 目前我正在使用 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 也可以正确返回数据。

【问题讨论】：

请参考下面的链接：github.com/facebook/react-native/issues/…

如果有人在 ios 上遇到这个问题，请确保您使用的是 https 而不仅仅是 http。默认设置仅支持 https。

如何更改设置以支持 HTTP？

您需要批准info.plist 中的域。 ***.com/questions/38418998/…

即使一个人不在线，显示网络请求失败的红屏看起来不太好，有没有办法以自己的方式处理它，比如警报之类的......

【参考方案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”

【参考方案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 而不是本地主机运行 PHP 内置服务器：php -S 172.16.0.10:8000 ... 关闭专用网络的 Windows 防火墙

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

【讨论】：

只是将localhost 切换为我的本地IP 就可以了，也许是解析localhost 的错误？

【参考方案3】：

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

【参考方案4】：

检查以下两种情况

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

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

【讨论】：

那应该是一个评论。这不是问题的答案。

这不是答案

【参考方案5】：

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

它现在应该运行了。

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

【参考方案6】：

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

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

【参考方案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 帮助了我。

【参考方案8】：

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

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

【参考方案9】：

以上答案都没有帮助我。 问题是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),

【讨论】：

遇到了同样的问题。这解决了它！谢谢

太棒了，抓住......你拯救了我的一天。谢谢！干得好。