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

时间:2018-11-21 21:23:04

标签: react-native axios react-native-android

我已经阅读了数十个答案,但似乎无法弄清楚:

  • 该请求在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
})

enter image description here

可以看出,请求看起来不错。它不是针对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东西以前可以正常工作。

有什么想法吗?

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

要解决此问题,您需要在以下图片中将API域添加到react_native_config.xml文件中:

enter image description here

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