net:ERR_CLEARTEXT_NOT_PERMITTED di Android Ionic & Angular

Akhirnya kesibukan yang melanda telah berakhir, dan saya mencoba membuat sebuah project aplikasi android menggunakan Ionic & Angular.

Seperti biasa error pasti terjadi😒, Dan karena itu saya membuat postingan ini.

Jadi ceritanya error ini bisa terjadi, program android yang saya buat akan melakukan HIT ke API yang berada di lokal (laptop). sekedar informasi, API yang saya buat menggunakan NodeJS dengan Express JS

Setelah menunggu lama, response dari API tak kunjung datang. Lalu saya memutuskan mencoba untuk melakukan inspect melalui chrome.

Benar saja terdapat error yang terjadi seperti judul di atas.

Tanpa perlu merasa putus asa, langsung saja saya tanya kakanda Google. Dan akhirnya mendapatkan solusi yang tepat.

Untuk cara mengatasinya, pertama buat file “android/app/src/main/res/xml/network_security_config.xml”. dan masukkan kode berikut

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="true">localhost</domain>
  </domain-config>
</network-security-config>

kalian bisa menambahkan domain dengan ip lokal kalian. Pada kasus saya alami saya menambahkan <domain includeSubdomains="true">192.168.1.127</domain>

Berikutnya pada file “android/app/src/main/AndroidManifest.xml”, tambahkan kode android:networkSecurityConfig="@xml/network_security_config"

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.worldspinner.portraits">

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

    . . . 

  </application>

  . . .

</manifest>

Lalu tinggal build atau running lagi program di device android. Semoga bermanfaat 😊