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

Can you make git repository of your sample project…?

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

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


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.

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.

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

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

is post method working in your mobile?

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

  constructor(private http: HttpClient


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, body, { headers }).toPromise()
    .then( async (resp:any) =>{ 

      result=await resp

    } ).catch( (error) => {


    } )

    return result

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

login(): Promise<LoginResponse> {
  return<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
Its’ because your accessing localhost…

still no solution. anyone face this issue?

headers : new HttpHeaders({
‘Content-Type’: ‘application/json’
.pipe(catchError( data => of(I caught: ${JSON.stringify(data)})))
.subscribe((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

or else change the domain from http to https

1 Like

finally i fixed the problem by installing CORS from below link

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" />
			 <add method="POST" />
			 <add method="OPTIONS" />
			<add header="header1" />
			<add header="header2" />
1 Like

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

I will try for the next project :smiley:

ya i am facing the same issue

this works well!! after implementing it, then it works out well

Hi @kasimacsys,
Can you tell the exact place where we have to add the above code ? this would be really helpful.
From where can we find the web.config file in our project?