无法使用 React Native 和 Axios 发送请求

Posted 2023-03-12

【中文标题】无法使用 React Native 和 Axios 发送请求

【英文标题】：Cannot send request with React Native and Axios

【发布时间】：2019-04-24 12:41:48

【问题描述】：

我已经阅读了几十个答案，但我似乎无法弄清楚：

该请求在 ios 中运行良好，但在 android 中不运行 我正在使用 React Native 0.57.5 和 axios 0.18.0 我把一些日志记录通过

axios.interceptors.request.use(request => 
  console.log('Starting Request', request)
  return request
)

axios.interceptors.response.use(response => 
  console.log('Response:', response)
  return response
)

可以看出，请求似乎很好。而且它不是针对localhost，而是针对一个实际运行的服务器（我编辑了一些内部标题键和完整的 URL）

还将日志语句发送到catch 我提出 axios 请求的位置：

axios.request(config)
      .then((axiosResponse) => 
        console.log('GOOD RESPONSE ', axiosResponse)

        // some logic 
      )
      .catch((error) => 
        console.log('axiosResponse ERROR', error)
        // some other logic
      )

这就是我在 chrome 调试器控制台中看到的：

axiosResponse ERROR Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:87)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:580)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:394)
    at XMLHttpRequest.js:507
    at RCTDeviceEventEmitter.emit (EventEmitter.js:190)
    at MessageQueue.__callFunction (MessageQueue.js:349)
    at MessageQueue.js:106
    at MessageQueue.__guard (MessageQueue.js:297)
    at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:105)
    at debuggerWorker.js:72

这是我从 React Native 0.55.0 升级到 0.57.5 的一部分，所以这个 axios 的东西之前可以正常工作。

有什么想法吗？

【参考方案1】：

对于你所说的，我认为这一定是你没有要求互联网权限，如果是这种情况，你需要在你的 android 项目中编辑你的清单文件，它必须在 $your_project_root_directory/android/app/ src/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="your.package"
    android:versionCode="1"
    android:versionName="1.0">
...
    <uses-permission android:name="android.permission.INTERNET" />
...
</manifest>

其他情况可能是，如果您使用的是 http 连接。试试下面的

<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">yourinsecureserver.com</domain>
    </domain-config>
</network-security-config>

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

https://android-developers.googleblog.com/2018/04/protecting-users-with-tls-by-default-in.html

【讨论】：

不幸的是，事实并非如此。我在我的 AndroidManifest.xml 中看到了<uses-permission android:name="android.permission.INTERNET" />。正如我所说，这开始发生是我升级 react native 的一部分

你能在设备上正常浏览吗？

你的网址是https还是http？ android-developers.googleblog.com/2018/04/…

我是个白痴——我修复了互联网连接，现在它可以工作了！ ***.com/questions/44535500/…非常感谢！

【参考方案2】：

要解决此问题，您需要在 react_native_config.xml 文件中添加 API 域，如下图所示：

Print on Android Studio

<?xml version="1.0" encoding="utf-8"?>
 <network-security-config>
  <domain-config cleartextTrafficPermitted="true">
   <domain includeSubdomains="false">localhost</domain>
   <domain includeSubdomains="false">10.0.2.2</domain>
   <domain includeSubdomains="false">10.0.3.2</domain>
   <domain includeSubdomains="false">192.168.0.9</domain>
 </domain-config>
</network-security-config>