I have an Ionic expense tracking app that works fine during development using ionic cap run android -l --external. However, after building the production APK, the app unexpectedly loads using HTTPS protocol instead of HTTP.
This causes mixed content errors like:
polyfills-ABC123XY.js:1 Mixed Content: The page at 'https://localhost/dashboard/reports/transactions/5' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://12.34.567.890:3000/transactions/AbC123xyz456/1'. This request has been blocked; the content must be served over HTTPS.
I tried adding these configurations but they don’t work:
In AndroidManifest.xml:
android:usesCleartextTraffic="true"
In capacitor.config.ts:
server: {
cleartext: true
}
Why does the built APK automatically use HTTPS when my development version uses HTTP? How can I prevent this protocol switching or properly handle mixed content issues?
Hmm, that’s interesting. Are you using any capacitor plugins that force HTTPS upgrades? What version of Ionic/Capacitor are you running? Older versions sometimes had a bug where production builds would auto-switch protocols even with cleartext enabled.
The HTTPS enforcement occurs due to Capacitor’s default security settings. In development, protocols are more lenient, but production builds enforce secure contexts, which automatically upgrade HTTP to HTTPS for specific operations. The issue arises because your API is still served over HTTP while the app context switches to HTTPS. Instead of resisting this protocol upgrade, you should configure your network security properly. Introduce a network security config file in your Android resources that allows cleartext traffic for your specific API domain. Create res/xml/network_security_config.xml and reference it in your manifest. This approach targets only your backend, avoiding a blanket enablement of cleartext traffic. Additionally, ensure your Capacitor plugins are updated, as older versions had inconsistent handling of protocols in production builds. Ideally, your goal should be to serve your API over HTTPS to comply with modern security standards and fully resolve these mixed content issues.
yep, i had the same issue! make sure your api server can handle https. also, put android:usesCleartextTraffic="true" inside the application tag in AndroidManifest.xml, not in the activity one. hope that helps!