Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED in Ionic 4

Question

I am getting this error when I call to server. But am getting this error rise Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTE'D when ever I hit for an API call(Both GET & POST).Otherwise the app works fine. It loading resources and everything well. Anyone have idea how to fix the issue? Will it related to server side or an issue in App front-end side?

service.ts file

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { devURL} from '../../environments/server.config';
import { map, catchError } from 'rxjs/operators';
const httpOptions = {
  headers: new HttpHeaders({
      "Content-Type": "application/x-www-form-urlencoded; charset=utf-8" , 
      "Access-Control-Allow-Origin": "*", 
      "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token, Accept, Authorization, X-Request-With",
      "Access-Control-Allow-Credentials" : "true",
      "Access-Control-Allow-Methods" : "GET, POST, DELETE, PUT, OPTIONS, TRACE, PATCH, CONNECT"  
     }) 
};  
@Injectable({
  providedIn: 'root',
})
export class AuthenticationService {

  constructor(
    private http: HttpClient
  ) { }
  post_data(url: string, data) {
    return this.http.post(`${devURL + url}`, data ).pipe(map((response: any) => response));
  }
  get_data(url) {
    return this.http.get(`${devURL + url}`).pipe(map((response: any) => response));
  }
  public uploadFormData(url, formData) {
    return this.http.post<any>(`${devURL + url}`, formData).pipe(map((response: any) => response));
  }
  getGoogleLocationData(lat, lng) {
    return this.http.get('https://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+lng+'&key=AIzaSyBniwyiEPSjS9IUvbhBmS0ampJkzE2cSS0').pipe(map((response: any) => response));
  }
}

Config.xml file

<?xml version='1.0' encoding='utf-8'?>
<widget id="" version="0.0.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name></name>
    <description>App</description>
    <author email="[email protected]" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="1000" />
    <preference name="AndroidPersistentFileLocation" value="Compatibility" />
    <platform name="android">
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
            <application android:usesCleartextTraffic="true" />
            <application android:networkSecurityConfig="@xml/network_security_config" />
        </edit-config>
        <edit-config file="*-Info.plist" mode="merge" target="NSLocationWhenInUseUsageDescription">
            <string>We use your location for full functionality of certain app features.</string>
        </edit-config>
        <resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources\android\icon\drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources\android\icon\drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources\android\icon\drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources\android\icon\drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources\android\icon\drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources\android\icon\drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources\android\splash\drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources\android\splash\drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources\android\splash\drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources\android\splash\drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources\android\splash\drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources\android\splash\drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources\android\splash\drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources\android\splash\drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources\android\splash\drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources\android\splash\drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources\android\splash\drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources\android\splash\drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/[email protected]" width="114" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/[email protected]" width="58" />
        <icon height="87" src="resources/ios/icon/[email protected]" width="87" />
        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
        <icon height="40" src="resources/ios/icon/[email protected]" width="40" />
        <icon height="60" src="resources/ios/icon/[email protected]" width="60" />
        <icon height="48" src="resources/ios/icon/[email protected]" width="48" />
        <icon height="55" src="resources/ios/icon/[email protected]" width="55" />
        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
        <icon height="58" src="resources/ios/icon/[email protected]" width="58" />
        <icon height="87" src="resources/ios/icon/[email protected]" width="87" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/[email protected]" width="80" />
        <icon height="120" src="resources/ios/icon/[email protected]" width="120" />
        <icon height="88" src="resources/ios/icon/[email protected]" width="88" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/[email protected]" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/[email protected]" width="120" />
        <icon height="180" src="resources/ios/icon/[email protected]" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/[email protected]" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/[email protected]" width="152" />
        <icon height="167" src="resources/ios/icon/[email protected]" width="167" />
        <icon height="172" src="resources/ios/icon/[email protected]" width="172" />
        <icon height="196" src="resources/ios/icon/[email protected]" width="196" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="1125" src="resources/ios/splash/Default-Landscape-2436h.png" width="2436" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="2436" src="resources/ios/splash/Default-2436h.png" width="1125" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
</widget>

Chanaka Weerasinghe · Accepted Answer · 2019-12-16 08:53:59Z

Do this way

according to @nazehs answer

https://forum.ionicframework.com/t/err-cleartext-not-permitted-in-debug-app-on-android/164101/31

config.xml

<edit-config file="app/src/main/AndroidManifest.xml" 
   mode="merge" target="/manifest/application" 
   xmlns:android="http://schemas.android.com/apk/res/android">
     <application android:usesCleartextTraffic="true" />
     <application android:networkSecurityConfig="@xml/network_security_config" />
 </edit-config>
 <resource-file src="resources/android/xml/network_security_config.xml" 
 target="app/src/main/res/xml/network_security_config.xml" />

"resources/android/xml/network_security_config.xml" .

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">localhost</domain>
        <domain includeSubdomains="true">YOUR DOMAIN HERE/IP</domain>
    </domain-config>
</network-security-config>

@WenchengLi sorry i will change it ,my bad
– Chanaka Weerasinghe
Commented Dec 16, 2019 at 8:53 — Chanaka Weerasinghe, Commented Dec 16, 2019 at 8:53

Jain Bhavesh · Accepted Answer · 2019-12-16 17:00:10Z

1

You need to use this plugin for this error

https://ionicframework.com/docs/native/http

this work's for me.

answered Dec 16, 2019 at 17:00

Jain Bhavesh

5786 silver badges18 bronze badges

Add a comment |

parrycima · Accepted Answer · 2019-12-16 08:40:57Z

You need to fix header security issue from server side and not from the app. Insert this code on your server side application.

      "Access-Control-Allow-Origin": "*", 
      "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token, Accept, Authorization, X-Request-With",
      "Access-Control-Allow-Credentials" : "true",
      "Access-Control-Allow-Methods" : "GET, POST, DELETE, PUT, OPTIONS, TRACE, PATCH, CONNECT"

Also try this one: https://stackoverflow.com/a/57098014/9685038

SuperStar518 · Accepted Answer · 2019-12-16 08:53:42Z

0

This problem is due to Android's security level-up.

Please refer to these issues. https://forum.ionicframework.com/t/err-cleartext-not-permitted-in-debug-app-on-android/164101/11

https://forum.ionicframework.com/t/livereload-err-cleartext-not-permitted/163487/18

answered Dec 16, 2019 at 8:53

SuperStar518

2,8642 gold badges21 silver badges36 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Failed to load resource: net::ERR_CLEARTEXT_NOT_PERMITTED in Ionic 4

service.ts file

4 Answers 4

Not the answer you're looking for? Browse other questions tagged
angular
ionic-framework
ionic4
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

service.ts file

4 Answers 4

Not the answer you're looking for? Browse other questions tagged angularionic-frameworkionic4 or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
angular
ionic-framework
ionic4
or ask your own question.