React Native Post Request via Fetch throws Network Request F

React Native Post Request via Fetch throws Network Request Failed

本文关键字：Request throws Network Fetch via Native Post React      更新时间：2023-09-26

我遇到了以下错误。目前我正在用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);
  });

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

类型错误：网络请求失败

当我将代码更改为GET请求时，它运行良好，在浏览器中以window.aalert（）作为返回值，它很酷，Chrome扩展Postman也能正确返回数据。

在设备上使用Windows操作系统/PHP内置服务器/react原生Android进行开发：

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

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

这个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"

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

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

它现在应该运行了。

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

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

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

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

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

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

由于证书过期，我在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问题评论帮助了我。

当我重新启动模拟器时，我的问题得到了解决

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

无效的代码：error:[typeError : network Request failed]

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

检查下面的两个案例

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

第二个原因是它吃了2个小时。

相关文章：