Httpclient post not working in angular device but its working in browser

http post method working in my browser but not my device. below is my config details. please anyone help me out.

Instead of posting your config details, post your code here.

Which device using for testing? device android version?

login(){
this.erroralert=’’;
this.showLoading();
if(this.username!=’’ && this.password!=’’){
let tempconObj = {serverIP : ‘’, webLink : ‘’, companyID: ‘’};
tempconObj = JSON.parse( localStorage.getItem(‘conObj’)) || tempconObj;
let data= {‘siteID’: tempconObj.companyID , ‘strEmpID’:this.username, ‘strPassword’: this.password};

  let url = tempconObj.webLink + 'Common.asmx/UserValidate';
  this._http.post(url,data,{
    headers : new HttpHeaders({
      'Content-Type': 'application/json' 
    })
  })       
  .subscribe((data)=>{    
    this.param.data = data;
    this.loginDetails = JSON.parse( this.param.data.d);   

    if(this.loginDetails.ErrorNo===0)
    {
      this.router.navigate(["/dashboard"] );
    }
  } , err=>{
    this.erroralert='Please Enter Valid Data...'+JSON.stringify(this.loginDetails.ErrorMsg);
  })
}    

}

am using android mobile. version 9

Hello,
As I know there are two solutions for this issue:

Solution-1:

Remove web view plugin

note: I am not sure this will work or not.

Solution-2:

Add this lines in your config.xml file

<widget xmlns:android="http://schemas.android.com/apk/res/android">

<platform name="android">
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:usesCleartextTraffic="true" />
        </edit-config>
<platform>

Hi,
i tried the both solution, but it still working in browser but not in my mobile.

Thanks

Can you make git repository of your sample project…?

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

Add this code in your network_security_config.xml which should be located in resources>android>xml directory.

Hi,
the below link i added zip file. please extract it. please change the url variable as your json api.


for your reference, my json would be like below image.
MA6

Hi,
i added this code but still the problem persist.
the below link i added zip file. please extract it. please change the url variable as your json api.


for your reference, my json would be like below image.
MA6

Hello, I just tested with my api it’s working fine in android 9

hi,
test alert is coming. thats not a problem. but http post doesn’t retrieve data after the alert msg.

hi,
is post method working in your mobile?

Try this.
import { HttpClient, HttpHeaders } from "@angular/common/http";
Declare

  constructor(private http: HttpClient

Requesto

async login () {
    const headers = new HttpHeaders({'Content-Type': 'application/json' })
    const url = `URL TO REQUEST`;

    var body = await {'siteID': tempconObj.companyID, 'strEmpID': this.username, 'strPassword': this.password}

    let result:any;

    await this.http.post(url, body, { headers }).toPromise()
    .then( async (resp:any) =>{ 

      console.log(resp
      result=await resp

    } ).catch( (error) => {

     console.log(error);

    } )

    return result
  }

Would you mind explaining why you prefer that over something like this?

login(): Promise<LoginResponse> {
  return this.http.post<LoginResponse>(url, {
    siteID: tempconObj.companyID, 
    strEmpId: this.username,
    strPassword: this.password}).toPromise();
}

Specifically, I don’t understand:

  • why we are bothering with custom headers
  • what it even means to await what appears to be an ordinary variable assignment
  • why there is all the asyncing and awaiting surrounding the post call
  • why we don’t just let errors propagate naturally to the caller
  • why result needs to exist; let alone be populated in such elaborate fashion

See this https://forum.ionicframework.com/t/ionic4-connection-refused-please-help-me-how-to-solve/175083
Its’ because your accessing localhost…

still no solution. anyone face this issue?

Hi,
this._http.post(url,data,{
headers : new HttpHeaders({
‘Content-Type’: ‘application/json’
})
})
.pipe(catchError( data => of(I caught: ${JSON.stringify(data)})))
.subscribe((data)=>{
this.param.data = data;
alert('subscribe : ’ + JSON.stringify(data));
}
)
after i write pipe with catcherror i got alert by below screen shot

I resolved the issue by adding this to manifest.xml file
android:usesCleartextTraffic=“true”

or else change the domain from http to https