How to make a post request with Angular 4?

Question

I'm trying to make a post request with Angular 4 with this code to send lat and lng parameters:

let data = {lat: this.newLat, lng: this.newLng};

this.http.post(url, data)
  .map(response => response.json())
  .subscribe(getResponse => console.log(getResponse));

On the server side, I have the following php snippet:

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type");

if ( isset($_POST['lat'], $_POST['lng']) ) {
    $response['msg'] = 'ok';
} else {
    $response['msg'] = 'not ok';
}
echo json_encode($response);

The response from the server is unfortunately always 'not ok'. Any ideas how to solve this? The $_POST variable is always an empty array

Try `var_dump(file_get_contents("php://input"));` on PHP's side. See if you get any POST params in that. — mega6382, Oct 10 '17 at 15:27

score 0 · Answer 1 · answered Oct 10 '17 at 15:31

See the documentation

If the data property of the request configuration object contains an object, serialize it into JSON format.

and

$httpProvider.defaults.headers.post: (header defaults for POST requests) Content-Type: application/json

Angular is encoding the data as JSON, and not one of the data formats which PHP will automatically parse into $_POST.

You need to parse JSON as described in this answer.

score 0 · Accepted Answer · answered Oct 10 '17 at 15:31

The PHP superglobal $_POST, only is supposed to wrap data that is either, application/x-www-form-urlencoded or multipart/form-data-encoded.

But if the Content-Type for request is anything else. You need to use:

$post = file_get_contents('php://input');

For more info look at this answer: https://stackoverflow.com/a/8893792/2394254

How to make a post request with Angular 4?

2 Answers2