[solved] Angular HttpClient POST request and parameters

Ionic Framework ionic-v3
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"
  }
});
1 Like
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

13

Hi,

Please use “FormData”

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);
  });
5 Likes
14

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

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.