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
– Kevin FONTAINE, Commented Mar 15, 2019 at 9:45

brasofilo · Accepted Answer · 2019-03-18 13:26:41Z

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, 2019 at 13:26

brasofilo

26.2k15 gold badges96 silver badges189 bronze badges

answered Mar 15, 2019 at 9:45

xzesstence

7091 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Lairg Over a year ago

Hi xzesstence, thank you. Could you recommend a better way? In that way it sounds like a hotchpotch. What's the state of art?

xzesstence Over a year ago

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

Lairg Over a year ago

You've helped me both. Can't deciding by marking :-)

Script47 Over a year ago

This answer is being discussed on meta.

Aruna Herath Over a year ago

@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.

|

Qortex · Accepted Answer · 2019-03-15 09:44:42Z

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, 2019 at 9:44

Qortex

7,5124 gold badges46 silver badges62 bronze badges

2 Comments

Lairg Over a year ago

Thank you, Mic. Your approach is the right way? Or is there a better way?

Qortex Over a year ago

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: angular.io/guide/http

Collectives™ on Stack Overflow

Angular HttpClient: Post method does not set parameter correctly

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related