如果不使用 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"
    ...
>

重新安装应用程序

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

React Native app cannot reach backend API on Android, without using Charles + SSL tunnelling

android

httpbackend

react-native

apisauce