在Android Studio中启动Ionic应用时出现混合内容错误

问题说明 #

用Ionic+Angular做前端、Spring Boot做后端REST API的混合应用，在Ionic环境启动正常，但部署到Android后无法登录，控制台报错：

Mixed Content: The page at 'https://localhost/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://AdressIp:Port/doctors/login'. This request has been blocked; the content must be served over HTTPS.

已在Manifest中添加android:usesCleartextTraffic="true"但问题未解决。

核心原因 #

Android端的WebView以HTTPS方式加载本地页面（https://localhost/），根据浏览器安全策略，HTTPS页面不允许发起HTTP请求，这属于混合内容限制，并非单纯的Android明文流量权限问题，所以仅设置usesCleartextTraffic无法解决。

解决方案 #

1. 后端启用HTTPS（推荐方案）

让Spring Boot后端提供HTTPS接口，从根源上消除混合内容问题：

• 生成SSL证书（可使用自签名证书用于测试，正式环境需用CA颁发的证书）
• 在Spring Boot的application.properties中配置SSL：

  server.port=8443
  server.ssl.key-store=classpath:keystore.p12
  server.ssl.key-store-password=your_password
  server.ssl.key-store-type=PKCS12
  server.ssl.key-alias=your_alias
  

• 前端将请求地址改为https://AdressIp:8443/doctors/login

2. 配置Android网络安全策略

若暂时无法启用后端HTTPS，可通过Android网络安全配置允许特定域名的明文请求：

• 在res/xml目录下创建network_security_config.xml文件：

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

• 在AndroidManifest.xml的application标签中引用该配置：

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

3. Ionic端配置检查

• 确保config.xml中允许外部请求：

  <access origin="*" />
  <allow-navigation href="*" />
  

• 在Angular的环境配置文件（environment.ts/environment.prod.ts）中统一配置API地址，避免硬编码HTTP地址。

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