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

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

Hi,
finally i fixed the problem by installing CORS from below link
https://www.iis.net/downloads/microsoft/iis-cors-module

and add the below tag in web.config file within the <system.webserver> tab

       <cors enabled="true" failUnlistedOrigins="true">
	     <add origin="*" maxAge="600"> 
		 <!-- allowCredentials="true" -->
		 
		<allowHeaders allowAllRequestedHeaders="true">
			<add header="header1" />
			<add header="header2" />
		</allowHeaders>
		<allowMethods>
			 <add method="POST" />
			 <add method="OPTIONS" />
		</allowMethods>
		<exposeHeaders>
			<add header="header1" />
			<add header="header2" />
		</exposeHeaders>
	</add>
</cors>

Please provide documentation link of Solution.

I have the same issue then I resolve it by downgrade Ionic-4 CLI version and I have created a git repository for this.

You can use it

1 Like

Thanks,
I will try for the next project :smiley: