Ionic Android应用无法与Express后端通信求助

问题背景 #

将运行正常的Ionic Web应用打包为Android应用后，应用可启动但无法与Express后端通信，初始报错：

Msg: Mixed Content: The page at 'https://localhost/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://{{ip}}:3000/getGroupsNameOfUser'. This request has been blocked; the content must be served over HTTPS.

注：getGroupsNameOfUser是Express的app.post()接口，{{ip}}为Express服务器的本地IP

已尝试的无效方案 #

• 在AndroidManifest.xml添加android:usesCleartextTraffic="true"开启明文流量
• 在res/xml/创建network_security_config.xml，配置允许指定域名的明文流量，并在AndroidManifest.xml中关联该配置

配置HTTPS后的新问题 #

为Express配置自签名SSL证书后，Android应用仍无法通信，报错如下：

[ERROR:ssl_client_socket_impl.cc(879)] handshake failed; returned -1, SSL error code 1, net_error -202

2024-05-25 12:08:30.335 22173-22173 Capacitor/Console       io.ionic.starter                     E  File: https://localhost/main.262cd90795cda89d.js - Line 1 - Msg: ERROR [object Object]

2024-05-25 12:08:31.178  1588-2373  VerityUtils             system_server                        E  Failed to measure fs-verity, errno 1: /data/app/~~DnQFZdmZ2tBOfRYWJyZ4Rw==/io.ionic.starter-bZlHBiUj6Wi4udiAfuiCCA==/base.apk

2024-05-25 12:08:31.306  1588-2373  VerityUtils             system_server                        E  Failed to measure fs-verity, errno 1: /data/app/~~DnQFZdmZ2tBOfRYWJyZ4Rw==/io.ionic.starter-bZlHBiUj6Wi4udiAfuiCCA==/base.apk

补充：已尝试将证书转为DER格式并添加到手机信任证书，本地Postman可正常请求https://localhost:3000，其他电脑Postman关闭SSL验证后也可请求

解决方案 #

方案1：配置Android网络安全策略信任自签名证书 #

1. 将selfsigned.crt复制到Android项目的res/raw/目录（无raw文件夹则新建）
2. 编辑res/xml/network_security_config.xml，添加信任该证书的配置：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="false">
        <domain includeSubdomains="true">{{你的服务器IP}}</domain>
        <trust-anchors>
            <certificates src="@raw/selfsigned" />
            <certificates src="system" />
        </trust-anchors>
    </domain-config>
</network-security-config>

3. 在AndroidManifest.xml的<application>标签中确保关联配置：

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

方案2：生成包含SAN（主题备用名称）的自签名证书 #

Android对自签名证书的SAN字段有强制要求，之前的证书可能缺少该字段导致验证失败：

1. 生成包含SAN的证书：

openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout ./selfsigned.key -out selfsigned.crt -subj "/C=CN/ST=YourState/L=YourCity/O=YourOrg/OU=YourUnit/CN={{你的服务器IP}}" -addext "subjectAltName=IP:{{你的服务器IP}},DNS:localhost"

2. 替换Express中的证书文件，重启服务器
3. 重复方案1的步骤，将新证书添加到Android项目并配置网络安全策略

方案3：开发环境临时禁用SSL验证（仅调试用） #

使用Capacitor HTTP插件并关闭SSL验证（禁止生产环境使用）：

import { HTTP } from '@capacitor-community/http';

async function fetchData() {
  const options = {
    url: 'https://{{你的服务器IP}}:3000/getGroupsNameOfUser',
    method: 'POST',
    data: {},
    trustAll: true, // 仅开发环境启用
    headers: {
      'Content-Type': 'application/json'
    }
  };
  const response = await HTTP.request(options);
}

内容的提问来源于stack exchange，提问作者kasimaru13