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

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

Kalle Richter · Accepted Answer · 2018-05-05 11:49:20Z

7

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

edited May 5, 2018 at 11:49

Kalle Richter

8,85429 gold badges96 silver badges209 bronze badges

answered Oct 12, 2017 at 18:32

Osama Sheikh

1,0241 gold badge12 silver badges15 bronze badges

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

Comments

JayDeeEss · Accepted Answer · 2017-10-12 14:26:05Z

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

answered Oct 12, 2017 at 14:26

JayDeeEss

1,0839 silver badges14 bronze badges

6 Comments

Osama Sheikh Over a year ago

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.

Osama Sheikh Over a year ago

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

JayDeeEss Over a year ago

check this answer, might be helpful! link

Osama Sheikh Over a year ago

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

JayDeeEss Over a year ago

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

|

reshanpubudu · Accepted Answer · 2018-05-30 20:17:28Z

1

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

answered May 30, 2018 at 20:17

reshanpubudu

891 silver badge8 bronze badges

Collectives™ on Stack Overflow

Angular 4 Http POST not working

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related