Ionic Android端图片加载失败及跨域API调用适配问题

问题概述 #

• 开发Ionic应用时，仅Android设备出现图片加载失败，iOS端正常；使用<img src={imageurl} alt="" />加载公共图片
• 采用Capacitor社区HTTP插件发起API调用可规避CORS，双平台API调用均正常；但切换为axios时，Android端API调用正常但iOS端触发CORS，且Android端用axios调用API返回异常响应
• 报错信息：E/Capacitor: Unable to open asset URL:

已配置项 #

1. AndroidManifest中设置 android:usesCleartextTraffic="true"
2. Capacitor配置：

webDir: "build",
bundledWebRuntime: false,
android: {
  allowMixedContent: true
},
server: {
  cleartext: true,
  hostname: "baseurl.hu",
  iosScheme: "localhost",
  androidScheme: "https"
},

应用运行步骤 #

• ionic capacitor copy android
• Android Studio运行

解决方案 #

1. 修正图片URL与Capacitor服务器配置冲突 #

Capacitor的server.hostname和androidScheme配置会影响资源请求的解析：

• 确保图片URL为完整绝对路径（包含http/https前缀），避免被Capacitor误判为本地资产
• 测试移除server.hostname配置，或临时将androidScheme改为http，验证是否解决加载问题

2. 添加允许导航的域名规则 #

在Capacitor配置的server节点中添加图片域名的导航许可，防止请求被拦截：

server: {
  cleartext: true,
  hostname: "baseurl.hu",
  iosScheme: "localhost",
  androidScheme: "https",
  allowNavigation: ["baseurl.hu", "你的图片资源域名"] // 替换为实际图片域名
}

3. 强化Android混合内容支持 #

针对Android 11+的混合内容限制，补充配置：
在AndroidManifest的<application>标签内添加：

<meta-data android:name="android.webkit.WebSettings.allowContentAccess" android:value="true" />
<meta-data android:name="android.webkit.WebSettings.allowFileAccess" android:value="true" />

4. 统一HTTP客户端方案 #

避免双平台混用不同HTTP工具，全平台采用Capacitor社区HTTP插件：

1. 确保插件正确安装同步：

npm install @capacitor-community/http
npx cap sync

2. 封装统一的API请求工具类，消除axios与原生插件混用带来的兼容性问题

内容的提问来源于stack exchange，提问作者J.Doe