我不能用axios发送超文本传输协议，甚至在React native中设置android:usesCleartextTraffic="true“和网络安全配置

Question

我正在尝试使用Axios与我的服务器通信。我检查它在相同的URL，相同的Postman正文数据中工作得很好。然而，在大多数情况下，应用程序不会进行HTTP调用-只有当我在调试模式下打开react-native-debugger中的网络检查器时，它才起作用。创建一堆错误消息，如下所示。

Error: Network Error at createError 
(http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.wheelie&modulesOnly=false&runModule=true:115372:17) at EventTarget.handleError
(http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.wheelie&modulesOnly=false&runModule=true:115282:16) at EventTarget.dispatchEvent
(http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.wheelie&modulesOnly=false&runModule=true:33554:27) at EventTarget.setReadyState
(http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.wheelie&modulesOnly=false&runModule=true:32692:20) at EventTarget.__didCompleteResponse
(http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.wheelie&modulesOnly=false&runModule=true:32500:16) at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.wheelie&modulesOnly=false&runModule=true:32616:47 at RCTDeviceEventEmitter.emit
(http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.wheelie&modulesOnly=false&runModule=true:2310:37) at MessageQueue.__callFunction
(http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.wheelie&modulesOnly=false&runModule=true:3348:31) at http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.wheelie&modulesOnly=false&runModule=true:3076:17 at MessageQueue.__guard
(http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=com.wheelie&modulesOnly=false&runModule=true:3302:13)

我读过一篇文章，说android网络策略可能是原因。我更改了下面的AndroidManifest.xml。然后我检查了域中是否有http://或https://，该域没有问题。最后，我添加了network_security_config.xml，但它并没有做任何改变。

我使用的是实体安卓手机(galaxy A50，android11)，而不是AVD。targetSdkVersion和complieSdkVersion也是API30，minSdkVersion是22。

postLogIn

export function postLogIn(authorizationInfo: WheelieAuthorizationInfo) {
  return axios.post<{
    statusCode: number;
    token: string;
  }>(`${domain}/account/login`, authorizationInfo);
}

app/src/debug/AndrodiManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <application
        android:usesCleartextTraffic="true"
        android:networkSecurityConfig="@xml/network_security_config"
        tools:targetApi="28"
        tools:ignore="GoogleAppIndexingWarning">
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
</manifest>

network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
            <certificates src="user" />
        </trust-anchors>
        
    </base-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">10.0.2.2</domain>
    </domain-config>
</network-security-config>

Answer 1

两天前，我通过为我的后端应用编程接口服务器添加network_security_config.xml和网络证书(*.pem)解决了这个问题。

参考资料：Andorid Dev Network Security Configuration

首先，在AndroidManifest.xml中添加自定义网络安全设置

...
<application
      ...
      android:networkSecurityConfig="@xml/network_security_config">

第二，创建./android/app/src/main/res/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
  <network-security-config>
    <domain-config>
      <domain includeSubdomains="true">pedalers.net</domain>
        <trust-anchors>
          <certificates src="@raw/my_ca"/>
        </trust-anchors>
      </domain-config>
    <domain-config cleartextTrafficPermitted="true">
    <!-- Without localhost setting, it's unable to connect metro with app. -->
      <domain includeSubdomains="true">127.0.0.1</domain>
      <!-- For physical phone, 10.0.0.1 is the address connect to computer -->
      <domain includeSubdomains="true">10.0.0.1</domain>
      <!-- For AVD, 10.0.2.2 is the address connect to computer -->
      <domain includeSubdomains="true">localhost</domain>
    </domain-config>
  </network-security-config>

第三，将PEM或DER格式的自签名或非公共CA证书添加到res/raw/my_ca。