Ionic5+Vue使用capacitor-community/http请求自签名证书地址报错如何解决

capacitor-community/http 原生支持处理自签名证书场景，可通过以下两种方案解决SSLHandshakeException报错：

方案1：开发阶段临时禁用SSL校验（仅可用于本地测试，严禁生产环境启用） #

该方案和Postman关闭SSL校验的效果一致，操作成本最低：

• 在项目根目录的capacitor.config.ts（或capacitor.config.json）中添加HTTP插件配置：

const config: CapacitorConfig = {
  // 其余原有配置保持不变
  plugins: {
    Http: {
      // 仅开发环境开启该配置
      allowUntrustedCerts: true
    }
  }
}

• 安卓端额外配置：打开android/app/src/main/AndroidManifest.xml，在标签添加属性android:usesCleartextTraffic="true"
• iOS端额外配置：打开iOS项目的Info.plist，在NSAppTransportSecurity配置项中将NSAllowsArbitraryLoads设为true
• 配置完成后执行npx cap sync同步配置到原生项目，重新编译运行即可生效

方案2：生产环境证书信任方案（推荐，无安全风险） #

禁用SSL校验存在中间人攻击风险，生产环境建议将自签名证书内置到应用中进行信任：

• 导出你的自签名证书为.cer格式文件
• 安卓端配置：
  1. 将证书文件放入android/app/src/main/res/raw目录，无raw目录可新建
  2. 在android/app/src/main/res/xml目录下新建network_security_config.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config>
    <domain includeSubdomains="false">替换为你的内网IP地址</domain>
    <trust-anchors>
      <certificate src="@raw/你的证书文件名，无需带.cer后缀"/>
    </trust-anchors>
  </domain-config>
</network-security-config>

3. 打开AndroidManifest.xml，在标签添加属性android:networkSecurityConfig="@xml/network_security_config"

• iOS端配置：
  1. 将.cer证书文件拖入Xcode项目，勾选「Copy items if needed」和对应的应用target
  2. 重新编译项目即可自动信任该证书

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