Ajax调用在Cordova正常但Ionic React Capacitor项目中失效

问题根因分析 #

• 明文HTTP请求限制：Android 9（API 28）及以上、iOS 9及以上默认禁止未加密的HTTP明文请求，若自有接口使用HTTP而非HTTPS协议会被系统直接拦截。Cordova项目通常默认配置了明文请求允许规则，而Capacitor默认无该配置，因此出现两端表现不一致的问题。
• SSL证书校验不通过：若自有接口使用自签名SSL证书、过期证书或证书链不完整，系统会判定连接不安全并拦截请求，公开测试接口使用正规CA机构颁发的有效证书因此可正常访问。
• 浏览器调试阶段CORS限制：若你在浏览器端使用ionic serve调试，运行环境为浏览器会触发同源策略的CORS校验，打包为原生APP后Capacitor网络请求走原生层，不受CORS规则限制。
• 网络访问权限缺失：项目未配置正确的网络访问权限，导致请求被系统直接拒绝。

解决方案 #

处理明文HTTP请求限制 #

根据运行平台修改对应配置：

• Android端：在android/app/src/main/AndroidManifest.xml的<application>标签中添加属性android:usesCleartextTraffic="true"，即可允许明文HTTP请求。
• iOS端：在ios/App/App/Info.plist中添加NSAppTransportSecurity配置，可选择全局允许明文请求，或仅对自有接口域名放行：

<key>NSAppTransportSecurity</key>
<dict>
  <!-- 全局允许明文请求，仅测试阶段使用 -->
  <key>NSAllowsArbitraryLoads</key>
  <true/>
  <!-- 更安全的指定域名放行方案 -->
  <key>NSExceptionDomains</key>
  <dict>
    <key>替换为你的接口域名</key>
    <dict>
      <key>NSExceptionAllowsInsecureHTTPLoads</key>
      <true/>
    </dict>
  </dict>
</dict>

处理SSL证书校验问题 #

优先给服务端配置正规CA机构颁发的有效SSL证书，测试阶段可临时关闭Capacitor的SSL错误校验，在capacitor.config.ts（或旧版capacitor.config.json）中添加如下配置：

{
  "server": {
    "ignoreSslErrors": true
  }
}

注意：该配置仅可用于测试环境，正式上线前必须关闭，避免出现安全风险。

处理浏览器调试CORS问题 #

可选择任意一种方案解决：

1. 配置Ionic本地代理：在ionic.config.json中添加代理规则，转发本地请求到接口域名，绕过CORS限制：

{
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "替换为你的接口根地址"
    }
  ]
}

2. 服务端配置CORS响应头，允许本地调试地址的跨域请求。

补全网络访问权限 #

确认Android端AndroidManifest.xml中已添加网络访问权限：

<uses-permission android:name="android.permission.INTERNET" />

iOS端默认不需要额外配置网络权限。

内容的提问来源于stack exchange，提问作者Inês Borges