React Native fetch（）无法正常工作

Posted 2023-03-25

【中文标题】React Native fetch（）无法正常工作

【英文标题】：React Native fetch() not working android

【发布时间】：2018-06-13 05:54:21

【问题描述】：

我正在尝试调用fetch() 函数。

它在 ios 上运行良好，但在 android 上无法运行。

fetch('https://admin.leanpoint.com/Api/User/Login?user=[e-mail]',  
  method: 'POST', 
  headers: 
    'Authorization': 'Basic c3JpbnVAbWFpbnBvaW50LmRrOnNhaWJhYmE='
  ,
)
.then((res) => 
  res.json().then((json) => 
    alert(JSON.stringify(json))
  )
)
.catch((err) => 
  alert(JSON.stringify(err))
)

在 iOS 上，它输入 .then()，但在 Android 上，它输入 .catch()，而 err 是 。

它不适用于模拟器和真实设备。

感谢任何帮助。 ^_^

使用 Axios 的错误日志

当我使用 fetch() 时，它使用 输入 .catch()。

我尝试了Axios，如下所示。

axios.post('https://admin.leanpoint.com/Api/User/Login?user=[e-mail]', null, 
      headers: 
        'Authorization': 'Basic c3JpbnVAbWFpbnBvaW50LmRrOnNhaWJhYmE='
      ,
      timeout: 2000
    )
    .then((res) => 
      console.log(res.data)
    )
    .catch((err) => 
      console.log(err)
    )

它返回如下错误。

 [Error: Network Error]
  config:
    adapter: [Function: xhrAdapter],
     transformRequest:  '0': [Function: transformRequest] ,
     transformResponse:  '0': [Function: transformResponse] ,
     timeout: 2000,
     xsrfCookieName: 'XSRF-TOKEN',
     xsrfHeaderName: 'X-XSRF-TOKEN',
     maxContentLength: -1,
     validateStatus: [Function: validateStatus],
     headers:
       Accept: 'application/json, text/plain, */*',
        'Content-Type': 'application/x-www-form-urlencoded',
        Authorization: 'Basic c3JpbnVAbWFpbnBvaW50LmRrOnNhaWJhYmE=' ,
     method: 'post',
     url: 'https://admin.leanpoint.com/Api/User/Login?user=[e-mail]',
     data: null ,
  request:
    UNSENT: 0,
     OPENED: 1,
     HEADERS_RECEIVED: 2,
     LOADING: 3,
     DONE: 4,
     readyState: 4,
     status: 0,
     timeout: 2000,
     withCredentials: true,
     upload: ,
     _aborted: false,
     _hasError: true,
     _method: 'POST',
     _response: 'java.security.cert.CertPathValidatorException: Trust anchor for certification path not found.',
     _url: 'https://admin.leanpoint.com/Api/User/Login?user=[e-mail]',
     _timedOut: false,
     _trackingName: 'unknown',
     _incrementalEvents: false,
     responseHeaders: undefined,
     _requestId: null,
     _cachedResponse: undefined,
     _headers:
       accept: 'application/json, text/plain, */*',
        'content-type': 'application/x-www-form-urlencoded',
        authorization: 'Basic c3JpbnVAbWFpbnBvaW50LmRrOnNhaWJhYmE=' ,
     _responseType: '',
     _sent: true,
     _lowerCaseResponseHeaders: ,
     _subscriptions: [] ,
  response: undefined 

【问题讨论】：

在 android manifest 文件中添加了 INTERNET 权限？

是的，我在清单中添加了<uses-permission android:name="android.permission.INTERNET" />

尝试github.com/axios/axios项目

我不确定如何在 React Native 中使用。你能在这里为上面的 fetch() 函数写一些代码吗？

嗯。更新清单后是否重新安装了应用？

【参考方案1】：

这对我有用

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools">



<application android:usesCleartextTraffic="true" tools:targetApi="28" />

【参考方案2】：

这个工作， android\app\src\main\AndroidManifest.xml

<application
      ......
      android:usesCleartextTraffic="true"
      ......>

【讨论】：

OP 的 url 已经在使用 HTTPS，为什么这个 HTTP 解决方案能解决 OP 的问题？

【参考方案3】：

我已经使用以下解决方案解决了这个问题。

从 Android 9(Pie) 开始，我们需要将 networkSecurityConfig 设置为 AndroidManifast.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest ... >
    <application android:networkSecurityConfig="@xml/network_security_config">

    </application>
</manifest>

现在在 value/xml 文件夹中创建一个名为 network_security_config.xml 的新 xml 资源文件。此配置适用于应用的基本配置或默认安全配置，并禁用所有明文流量。

<network-security-config>
  <domain-config cleartextTrafficPermitted="false">
    <domain includeSubdomains="true">172.16.33.1</domain>
  </domain-config>
</network-security-config>

更多信息，请查看以下链接

https://codelabs.developers.google.com/codelabs/android-network-security-config/#3

https://developer.android.com/training/articles/security-config

https://medium.com/@son.rommer/fix-cleartext-traffic-error-in-android-9-pie-2f4e9e2235e6

【参考方案4】：

第二个日志指向您的错误。问题是 SSL 证书。解决方法见这篇文章：

Trust Anchor not found for Android SSL Connection

【讨论】：

@Vlav 考虑这个案例与java.security.cert.CertPathValidatorException 和 react-native 官方 repo 中已经存在的问题有关

【参考方案5】：

“我是蝙蝠侠” 提出了一个很好的建议，即使用 Axios。 Axios 非常更简单，并且可以在 ios/android 上始终如一地工作，而不是使用这些奇怪的错误。这是直接从他们的 github 发出 POST 请求的示例：

    axios.post('/user', 
    firstName: 'Fred',
    lastName: 'Flintstone'
  )
  .then(function (response) 
    console.log(response);
  )
  .catch(function (error) 
    console.log(error);
  );

【讨论】：

面临同样的问题，不能使用 axios 是它在 Android 上有自己的问题

【参考方案6】：

您可以在异常回溯中看到 java CertPathValidatorException 阻塞了网络请求并检查了与 android 相关的 this 答案

【参考方案7】：

感谢@mohsenomidi，此错误是由于 http 请求而发生的。将此行添加到 AndroidManifest.xml 中的 android:usesCleartextTraffic="true" 到 <application/>

<manifest xmlns:tools="http://schemas.android.com/tools"> .... 
    <application 
        android:usesCleartextTraffic="true" > ... 
    </application> 
</manifest>

https://github.com/facebook/react-native/issues/24627#issuecomment-492159371

【参考方案8】：

如果您在互联网连接图标附近看到!，也可能是由于 Android 模拟器中的互联网问题。然后您应该将您的网络的 DNS 地址更改为 8.8.8.8。你应该看到这个答案知道如何：https://***.com/a/49332186/6170191