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

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

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

Answer 4

检查以下两种情况

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

第二个原因已经吃了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

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

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

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