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

Appflow
1

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

MA1
MA1.png944×429 11.2 KB
MA2
MA2.png1366×768 116 KB
MA3
MA3.png1366×768 96.6 KB
MA4
MA4.png1366×768 92.8 KB

2

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

3

Which device using for testing? device android version?

4

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);
  })
}

}

5

am using android mobile. version 9

6

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>
7

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

MA5
MA5.png1095×429 18.2 KB

Thanks

8

Can you make git repository of your sample project…?

9 
<?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.

3 Likes
10

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

11

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

12

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

localhost_8100_home(Galaxy%20S5)
localhost_8100_home(Galaxy S5).png1080×592 20.3 KB

13

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

14

hi,
is post method working in your mobile?

15

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
  }
16

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
18

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

19

still no solution. anyone face this issue?

20

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

MA7
MA7.png407×576 80 KB

21

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

or else change the domain from http to https

1 Like