[solved] Angular HttpClient POST request and parameters


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:

 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

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!

Same thing happens with Angular 5.0.1.

What is your server side code?

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

Simplifying it, my PHP server code looks like this:

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.

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

Thanks @Jacktoolsnet , your approach worked perfectly after I did
$_POST = json_decode(file_get_contents(‘php://input’), true);

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,

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

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.
Form a GET URL that looks something like this:

@ng22792 the api is expecting a post request.


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

I thik this line

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

this.http.post(API_DATA.APP_URL+’/WomensCategories.php’, data,

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



Please use “FormData”

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

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

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

	    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.