如果不使用 Charles + SSL 隧道，React Native 应用程序无法在 Android 上到达后端 API

Question

我的 RN 应用程序在 iOS 上完美运行。但是在 Android 上，它无法到达后端（使用 https 托管在云中）或任何其他 URL，如https://randomuser.me/api

但是当我让设备使用 Charles 作为 HTTP 代理时，安装 Charles 根证书并为后端主机名（或 randomuser.org）启用 SSL 代理 - 它可以正常工作。

该问题在 2 个物理 android 9 设备和 Android 11 模拟器上都存在。

我相信我需要更改应用程序代码中的某种配置，以便让应用程序调用我的后端 - 它以前工作过，但现在升级包括 Android Studio 在内的所有内容后就不行了。 或者设备可能被搞砸了？

不幸的是，Apisauce 的错误并没有给我太多提示。 我也尝试过原始提取，但在不通过 Charles SSL 代理时出现此错误。

我从fetch中得到的唯一信息是Fetch ERROR [TypeError: Network request failed]

有什么问题？

Answer 1

在app/src/main/res/xml文件夹中创建network_security_config.xml文件（如果没有xml文件夹就新建一个）并添加这个

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

在 AndroidManifest.xml 添加这两行

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

重新安装应用程序