# \[solved\] Angular HttpClient POST request and parameters

**URL:** <https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124>\
**Category:** ionic-v3\
**Created:** [November 14, 2017, 4:51pm UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124 "2017-11-14T16:51:37Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![rafarco](https://avatars.discourse-cdn.com/v4/letter/r/e68b1a/32.png) [@rafarco](https://forum.ionicframework.com/u/rafarco)\
**Post date:** [November 14, 2017, 4:51pm UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/1 "2017-11-14T16:51:38Z")

</div>

Hello,

I’m having some problems sending an HTTP POST request with Angular’s new HttpClient. The request arrives to the HTTP server, but apparently no parameters are added. Here is the code:

```auto
 makeLogin(login: string, pass: string) {
    const body = {user: login, password: pass};

    this.http.post(this.loginUrl, body)
    .subscribe(data => {...},
err => {
      console.log('Error: ' + err.error);
      console.log('Name: ' + err.name);
      console.log('Message: ' + err.message);
      console.log('Status: ' + err.status);
    });

```

And I’m only getting this:  
Http failure during parsing for [http://localhost:8100/api/login](http://localhost:8100/api/login)

So I’m not sure if I’m passing the parameters to the server the right way. It should receive two post parameters, named user and password, but it doesn’t. I also read there are some issues with some Angular version. I’m running Ionic 3.17.0 and Angular 4.4.4. I’m rather new to Ionic, so maybe I’m just asking a very trivial question. Sorry for that.

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![rafarco](https://avatars.discourse-cdn.com/v4/letter/r/e68b1a/32.png) [@rafarco](https://forum.ionicframework.com/u/rafarco)\
**Post date:** [November 16, 2017, 7:58am UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/2 "2017-11-16T07:58:54Z")

</div>

Same thing happens with Angular 5.0.1.

---

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [November 16, 2017, 8:40am UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/3 "2017-11-16T08:40:20Z")

</div>

What is your server side code?

---

<div class="post-metadata">

**Author:** ![Ben1nB1ack](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ben1nb1ack/32/114904_2.png) [@Ben1nB1ack](https://forum.ionicframework.com/u/Ben1nB1ack)\
**Post date:** [November 16, 2017, 9:33am UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/4 "2017-11-16T09:33:42Z")

</div>

what’s the link to this new Angular HttpClient? is it in ionic docs?

---

<div class="post-metadata">

**Author:** ![rafarco](https://avatars.discourse-cdn.com/v4/letter/r/e68b1a/32.png) [@rafarco](https://forum.ionicframework.com/u/rafarco)\
**Post date:** [November 16, 2017, 11:08am UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/5 "2017-11-16T11:08:01Z")

</div>

Simplifying it, my PHP server code looks like this:

```auto
if(isset($_POST['user']) && !empty($_POST['user'])) {
  $user = $_POST['user'];
  $data = array();
  $data['user'] = $user;
  echo json_encode($data, JSON_FORCE_OBJECT);
}

```

However, nothing is printed out.

---

<div class="post-metadata">

**Author:** ![Jacktoolsnet](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jacktoolsnet/32/107318_2.png) [@Jacktoolsnet](https://forum.ionicframework.com/u/Jacktoolsnet)\
**Post date:** [November 16, 2017, 11:18am UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/6 "2017-11-16T11:18:12Z")

</div>

I think you are sending a json body to your server.

Take a look at this file it shows how to read json body with php

> <https://github.com/Jacktoolsnet/echoService/blob/master/echo.php>

---

<div class="post-metadata">

**Author:** ![rafarco](https://avatars.discourse-cdn.com/v4/letter/r/e68b1a/32.png) [@rafarco](https://forum.ionicframework.com/u/rafarco)\
**Post date:** [November 21, 2017, 12:46pm UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/7 "2017-11-21T12:46:16Z")

</div>

Thanks @Jacktoolsnet , your approach worked perfectly after I did  
$\_POST = json\_decode(file\_get\_contents(‘php://input’), true);

---

<div class="post-metadata">

**Author:** ![nacouzi](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@nacouzi](https://forum.ionicframework.com/u/nacouzi)\
**Post date:** [January 12, 2018, 9:55am UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/8 "2018-01-12T09:55:57Z")

</div>

what if i don’t have control over the api?  
the request must be sent like this `username=usr&password=passs&otherParam=something`.  
what i am doing now is

```
let data = 'username='+usr+'&password='+passs+'&otherParam='+something;

return this.http.post(API_DATA.APP_URL+'/WomensCategories.php', data,
{
  headers:{
    'content':"application/json",
    'content-type':"application/x-www-form-urlencoded"
  }
});

```

the below approach did not work

```
return this.http.post(API_DATA.APP_URL+'/WomensCategories.php', 
{
  'username': this.username,
  'password': this.pass,
  'someOtherParam' : this.value
},
{
  headers:{
    'content':"application/json",
    'content-type':"application/x-www-form-urlencoded"
  }
});
```

---

<div class="post-metadata">

**Author:** ![ng22792](https://avatars.discourse-cdn.com/v4/letter/n/5e9695/32.png) [@ng22792](https://forum.ionicframework.com/u/ng22792)\
**Post date:** [January 29, 2018, 5:39am UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/9 "2018-01-29T05:39:26Z")

</div>

@nacouzi  
The method you are trying to use is wrong. You should try using HTTP Get Method, instead of POST. This example is for POST method.  
Example:  
Form a GET URL that looks something like this:

[http://192.168.1.1/MyInstanceName/MyWebServiceName.php?username=usr&password=passs&otherParam=something](http://192.168.1.1/MyInstanceName/MyWebServiceName.php?username=usr&password=passs&otherParam=something)

---

<div class="post-metadata">

**Author:** ![nacouzi](https://avatars.discourse-cdn.com/v4/letter/n/8dc957/32.png) [@nacouzi](https://forum.ionicframework.com/u/nacouzi)\
**Post date:** [January 29, 2018, 2:00pm UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/10 "2018-01-29T14:00:09Z")

</div>

@ng22792 the api is expecting a post request.

---

<div class="post-metadata">

**Author:** ![ng22792](https://avatars.discourse-cdn.com/v4/letter/n/5e9695/32.png) [@ng22792](https://forum.ionicframework.com/u/ng22792)\
**Post date:** [January 29, 2018, 2:15pm UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/11 "2018-01-29T14:15:45Z")

</div>

> [@nacouzi](#):
>
> the below approach did not work

@nacouzi

Ask the API what all parameters it is expecting.  
Also, try using headers this way :

import { HttpClientModule, HttpClient,HttpHeaders } from ‘@angular/common/http’;

let config ={ headers: new HttpHeaders().set(‘Content-Type’, ‘application/json’) };

return this.http.post(API\_DATA.APP\_URL+‘/WomensCategories.php’,  
{  
‘username’: this.username,  
‘password’: this.pass,  
‘someOtherParam’ : this.value  
},  
config  
});

---

<div class="post-metadata">

**Author:** ![flycoders\_sourav](https://avatars.discourse-cdn.com/v4/letter/f/e47c2d/32.png) [@flycoders\_sourav](https://forum.ionicframework.com/u/flycoders_sourav)\
**Post date:** [January 29, 2018, 3:13pm UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/12 "2018-01-29T15:13:14Z")

</div>

I thik this line

```auto
this.http.post(API_DATA.APP_URL+'/WomensCategories.php', data,

```

this.http.post(API\_DATA.APP\_URL+’/WomensCategories.php’, data,

```auto
this.http.post(API_DATA.APP_URL/'+WomensCategories.php', data,

```

thanks

---

<div class="post-metadata">

**Author:** ![gpsdurai](https://avatars.discourse-cdn.com/v4/letter/g/8e7dd6/32.png) [@gpsdurai](https://forum.ionicframework.com/u/gpsdurai)\
**Post date:** [March 9, 2018, 7:51am UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/13 "2018-03-09T07:51:00Z")

</div>

Hi,

Please use “FormData”

```auto
let postData = new FormData();
postData.append('user' , 'login');
postData.append('password' , 'pass');

 this.http.post(this.loginUrl, postData)
.subscribe(data => {
    console.log(result);
 },
 err => {
      console.log('Error: ' + err.error);
  });

```

---

<div class="post-metadata">

**Author:** ![silambu-rd](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@silambu-rd](https://forum.ionicframework.com/u/silambu-rd)\
**Post date:** [February 23, 2019, 10:58am UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/14 "2019-02-23T10:58:00Z")

</div>

I’m using Ionic 4+(Cordova 7+) with Angular 7+  
Trying to GET/POST from Angular to PHP (Backend) through **HttpClient**

```auto
server.php
------------------------------------------------------------------------------------
	    header('Access-Control-Allow-Origin: *');
		header("Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS");
		header('Access-Control-Max-Age: 86400');
		header("Access-Control-Expose-Headers: Content-Length, X-JSON");
		header("Access-Control-Allow-Headers: *");

```

This would work fine in my case.  
Hope it will be useful. Happy coding.

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 10:03pm UTC](https://forum.ionicframework.com/t/solved-angular-httpclient-post-request-and-parameters/112124/15 "2021-07-19T22:03:54Z")

</div>