Angular HttpClient: Post method does not set parameter correctly

Question

There is a post request inside my method transmitProject(project: ProjectModel): Observable<boolean> via the HttpClient where I would like to post data to my backend:

-- inside my transmitProject-method

const params = {
   projectId: project.projectId,
   description: documentation.description,
   // some other attributes ...
};

return this.http.post(this.conf.url, params).pipe(
   map(response => {
      console.log(response);
      return true;
   })
);

... until here everyhting works fine. But the request sets the post data in json format. For testing the backend-server return the dumped $_POST variable -> null.

Request Payload: {projectId: "...", description: "...", longitude: 10, latitude: 10, … }

should actually be: projectId=...description=...longitude=10latitude=10...

-> In Postman everyhting works fine.

Transmitting data in JSON is the standard. Do you want them form-encoded ? — Kevin FONTAINE, Mar 15 '19 at 09:45

score 3 · Answer 1 · edited Mar 18 '19 at 13:26

3

The problem here is that Angular sends a post request of type JSON by default.

Either you change your PHP backend and instead using $_POST you can read the JSON:

<?
..
$JSON = file_get_contents("php://input");
if (!empty($JSON ))
{
  $params = json_decode($JSON, true); 
}
?>

Or if you really want to relay on sending as x-www-form-urlencoded you can use URLSearchParams which automatically set the content type to application/x-www-form-urlencoded:

let body = new URLSearchParams();
body.set('username', username);
body.set('password', password);

this.http.post(this.loginUrl, body).map(...);

Of course you can do it also manually if you encode your body correctly like this

let body = `username=${username}&password=${password}`;

but you then have to set your headers manually to application/x-www-form-urlencoded.

Like this

this.http.post(this.loginUrl, body, { headers: headers }).map(...);

edited Mar 18 '19 at 13:26

brasofilo

25,496
15
91
179

answered Mar 15 '19 at 09:45

xzesstence

679
6
19

Hi xzesstence, thank you. Could you recommend a better way? In that way it sounds like a hotchpotch. What's the state of art? – Lairg Mar 15 '19 at 10:18
1

since your are using angular, i recommend to use json and change the backend as i stated before, its simple and easy to use. if it helped, im very thankful if you mark it as answer. if you have further questions, just ask :) Cheers – xzesstence Mar 15 '19 at 11:03
You've helped me both. Can't deciding by marking :-) – Lairg Mar 15 '19 at 12:07
1

[This answer is being discussed on meta.](https://meta.stackoverflow.com/questions/381420/receiving-2-reputation-in-several-answers) – Script47 Mar 18 '19 at 09:40
1

@xzesstence looking at your activity page I see you have a series of downvotes. I think you are being targeted by a single user. You can flag this answer and pick "in need of moderator intervention" and describe your issue. – Aruna Herath Mar 19 '19 at 06:45
Thank you @ArunaHerath i will give it a try! – xzesstence Mar 22 '19 at 12:25

score 1 · Accepted Answer · answered Mar 15 '19 at 09:44

1

It is not obvious, but you are not using the httpClient in the right way.

You can find this situation explained in this SO post.

If you don't want to use JSON but want to stick with x-www-form encoding, Your code should look like:

const body = new HttpParams()
  .set('your property name', ** property value **)
  .set(...);

return this.http.post(this.conf.url,
  body.toString(),
  {
    headers: new HttpHeaders()
      .set('Content-Type', 'application/x-www-form-urlencoded')
  }
).pipe(... same code as you already have ...);

answered Mar 15 '19 at 09:44

Qortex

7,087
3
42
59

Thank you, Mic. Your approach is the right way? Or is there a better way? – Lairg Mar 15 '19 at 10:10
1

I think it's more natural to stick to JSON, as it is now the widespread standard. So, if you don't require `x-www-form`, just let Angular standard library do its fun with `content-type` being `application/json`. That way, the receiving end knows how to decode the payload (JSON.decode, or similar depending on the language). Check out the Angular doc on HttpClient for examples: https://angular.io/guide/http – Qortex Mar 15 '19 at 12:04

Angular HttpClient: Post method does not set parameter correctly

2 Answers2