0

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="hi@ionicframework.com" 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/icon@2x.png" width="114" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="20" src="resources/ios/icon/icon-20.png" width="20" />
        <icon height="40" src="resources/ios/icon/icon-20@2x.png" width="40" />
        <icon height="60" src="resources/ios/icon/icon-20@3x.png" width="60" />
        <icon height="48" src="resources/ios/icon/icon-24@2x.png" width="48" />
        <icon height="55" src="resources/ios/icon/icon-27.5@2x.png" width="55" />
        <icon height="29" src="resources/ios/icon/icon-29.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-29@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-29@3x.png" width="87" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="88" src="resources/ios/icon/icon-44@2x.png" width="88" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="172" src="resources/ios/icon/icon-86@2x.png" width="172" />
        <icon height="196" src="resources/ios/icon/icon-98@2x.png" 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>
Kevin Jose
  • 856
  • 8
  • 22

4 Answers4

2

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>
Chanaka Weerasinghe
  • 5,404
  • 2
  • 26
  • 39
1

You need to use this plugin for this error 

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

this work's for me.

Jain Bhavesh
  • 558
  • 5
  • 17
0

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

parrycima
  • 905
  • 8
  • 19
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

SuperStar518
  • 2,814
  • 2
  • 20
  • 35