[solved] Angular HttpClient POST request and parameters


#1

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:

 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!


#2

Same thing happens with Angular 5.0.1.


#3

What is your server side code?


#4

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


#5

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.


#6

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


#7

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


#8

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

#9

@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


#10

@ng22792 the api is expecting a post request.


#11

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


#12

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,

thanks