android - 如何在不弹出的情况下将 network_security_config.xml 添加到 expo 应用程序中的 list

Question

我正在用expo构建一个应用程序。
使用 Axios 处理请求。
API 具有自签名证书。
请求在 android 7 上失败(它们在 android 9 上工作)

我在网上看到我需要添加一个network_security_config.xml到 android list 。 Link.

如何在不弹出的情况下在 expo(可能是 app.json)中做到这一点？

谢谢 !

Answer 1

我遇到了类似的问题(需要使用自签名证书连接到本地 API)，经过大量的研究和实验，我终于找到了解决方案。您需要创建一个 config plugin ，这需要 Expo SDK 版本 41+。请注意，您将失去使用 Expo Go 的能力，但您将保留在托管工作流程中(即无需更改 native 代码)，并且您可以使用 EAS 构建来构建 custom dev client ，这基本上是为您的项目量身定制的 Expo Go 版本。
将证书添加到设备的用户证书列表中:
(如果您在下面的网络配置中包含您的(原始)证书，则此步骤可能是不必要的，请参阅 this link。)转到 Settings -> Security -> Advanced -> Encryption & credentials -> Install a certificate导入证书
确保证书确实是问题所在:

try {
    const response = await axios.post(urlPath, payload);
} catch (error) {
    console.error(error.request?._response);
}

如果您遇到网络错误和 error.request._response，您将知道您的应用程序不信任证书。读取 java.security.cert.CertPathValidatorException: Trust anchor for certification path not found. 创建插件:
您现在将创建一个配置插件，它基本上是在 Expo 的 prebuild 期间运行的 JS 函数。在构建原生项目之前修改原生配置(例如 Android list )的阶段。
在您的项目根目录中，创建 plugins包含以下两个文件的文件夹:

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>
</network-security-config>

trust-local-certs.js :

const {AndroidConfig, withAndroidManifest } = require('@expo/config-plugins');
const {Paths} = require('@expo/config-plugins/build/android');
const path = require('path');
const fs = require('fs');
const fsPromises = fs.promises;

const { getMainApplicationOrThrow} = AndroidConfig.Manifest

const withTrustLocalCerts = config => {
    return withAndroidManifest(config, async config => {
        config.modResults = await setCustomConfigAsync(config, config.modResults);
        return config;
    });
}

async function setCustomConfigAsync(
    config,
    androidManifest
) {

    const src_file_pat = path.join(__dirname, "network_security_config.xml");
    const res_file_path = path.join(await Paths.getResourceFolderAsync(config.modRequest.projectRoot),
        "xml", "network_security_config.xml");

    const res_dir = path.resolve(res_file_path, "..");

    if (!fs.existsSync(res_dir)) {
        await fsPromises.mkdir(res_dir);
    }

    try {
        await fsPromises.copyFile(src_file_pat, res_file_path);
    } catch (e) {
        throw e;
    }

    const mainApplication = getMainApplicationOrThrow(androidManifest);
    mainApplication.$["android:networkSecurityConfig"] = "@xml/network_security_config";

    return androidManifest;
}

module.exports = withTrustLocalCerts;

运行expo prebuild &链接插件
为了使用该插件，您必须有一个名为 app.json 的文件。在项目根目录中。我不能 100% 确定我从哪里得到文件，但我相信它是在我第一次运行 expo prebuild 时自动创建的.笔记:

我建议将 Expo SDK 升级到最新版本(当前为 44)，因为现在 prebuild命令(显然与 eject 相同)现在是完全可逆的(例如，它不会安装以前的大部分附加依赖项)。

Prebuild 将创建 native 文件夹，但您可以在完成插件设置后安全地删除这些文件夹(如果您想保留在托管工作流程中，您真的应该删除它们!当您运行 EAS 构建时，EAS 将假定裸工作流，如果它看到 native 文件夹，并且可能不会再次运行您的插件)。

运行expo prebuild并按照提示进行操作 -> 这应该会创建 app.json文件。

删除生成的原生android文件夹(和 ios ，如果它也被创建的话)。

在 app.json ，将以下内容添加到 expo 的末尾 key :

"plugins": [
  "./plugins/trust-local-certs.js"
]   

运行expo prebuild --no-install并检查 android/app/src/main/AndroidManifest.xml包含对您的网络配置的引用，以及 android/app/src/main/res/xml/network_security_config.xml已从您的 plugins 正确复制目录。

如果一切顺利，您的插件设置正确，您应该再次删除 native 文件夹(请参阅上面的注释)。

设置并运行 EAS 构建:
如果您还没有这样做，请通过 followingthese instructions 为 EAS build设置您的项目(安装 EAS CLI，运行 eas build:configure 并在 eas.json 中配置开发配置文件)。然后，运行 eas build --profile development --platform android .这将在云中创建一个自定义开发客户端(在 prebuild 阶段运行插件)，您可以将其安装在您的设备上并作为 Expo Go 的替代品。要启动 Metro 服务器，请运行 expo start --dev-client .然后，您的开发客户端应该能够获取到 Metro 服务器的连接，如果您再次运行 axios 请求，它应该会通过 :)