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('', {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

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

• javascript
• angular
• http-post
• angular-http
• angular-httpclient

• 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? – jonrsharpe Commented Oct 12, 2017 at 14:21
• Do you get any strange response/header from the OPTIONS response? – sz tech Commented Oct 12, 2017 at 14:23
• 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). – Osama Sheikh Commented Oct 12, 2017 at 14:58
• Possible duplicate of Angular2 - Http POST request parameters – AVJT82 Commented Oct 14, 2017 at 10:34

3 Answers 3

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();

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

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();
    }
);