Angular 4 Http POST not working

Question

I hope everyone is doing great. I've recently started working with angular 4.4, i've been trying to post data to my api server, but unfortunately it's not working. I've spent like 2 days on it but still no success. And have already tried 6-7 article even from angular.io. I've tried both Http and Httpclient modules but nothing seems to be working.

The problem is, whenever i try to post data to my server, Angular makes http OPTIONS type request instead of POST.

this.http.post('http://myapiserver.com', {email: '[email protected]'}).subscribe(
    res => {
        const response = res.text();
    }
);

And i've also tried to send custom options with the request but still no success.

const headers = new Headers({ 'Content-Type': 'x-www-form-urlencoded' });
const options = new RequestOptions({ headers: headers });
options.method = RequestMethod.Post;
options.body = {name: 'Adam Smith'};
//options.body = JSON.stringify({name: 'Adam Smith'}); // i also tried this
//options.body = 'param1=something&param2=somethingelse'; // i also tried this

I was using ASP.NET core 2.0, but since it wasn't working i also tried simple php code, Here is the server side code for php. And it's also not working.

<?php
print_r($_POST);
?>

Note: Cors are also enabled on server. Plus I also tried simple get request and its working perfectly fine.

I'll really appreciate some help.

Thanks in advance

Prurigo

OPTIONS is a pre-flight checking request, if everything is OK it will make the POST afterwards. Are you sure the CORS configuration is correct? What outputs do you see, could you expand on "not working" with a minimal reproducible example? – Tracitracie

Do you get any strange response/header from the OPTIONS response? – Oblivious

Here is the request angular sending pasteboard.co/GOBkz3Z.png And response is empty Array() (since i'm using print_r($_POST) in server side (php). – Prurigo

Possible duplicate of Angular2 - Http POST request parameters – Gisarme

Answer 1

I solved it by setting the Content-Type to application/x-www-form-urlencoded:

  const headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
  const options = new RequestOptions({ headers: headers });
  const params = new URLSearchParams();
  params.append('mypostField', 'myFieldValue');
  http.post('myapiendpoint.com', params, options).subscribe();

Prurigo

Answer 2

have you tried passing headers as the third argument in the post menthod:

this.http.post('http://myapiserver.com', JSON.stringify({name: 'Adam Smith'}), { headers: new Headers({ 'Content-Type': 'application/json' }) }).subscribe(
    res => {
        const response = res.text();
    }
);

make sure you import Headers from @angular/http

Columnist

yes i already tried it, it's not working. And for the double check i just tried again but it's not working at all. Its submitting ajax request in OPTIONS http request type. – Prurigo

its perfectly hitting the server, but with wrong http method OPTIONS when it should be POST. Check the screenshot of what angular is sending if i run your above code pasteboard.co/GOBkz3Z.png – Prurigo

check this answer, might be helpful! link – Columnist

i was finally able to solve the issue, Thank you so much for your help guys – Prurigo

great ! - you should post your solution whenever you get time for future references! – Columnist

just did :-), Thanks again! really appreciate the help. – Prurigo

Answer 3

I had same problem and i used like this.(using FormData) try it. It work for me.

let formdata = new FormData();
formdata.append('email', '[email protected]');

this.http.post('http://myapiserver.com', formdata).subscribe(
    res => {
        const response = res.text();
    }
);

Fishback