6

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: 'adam@example.com'}).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

Osama Sheikh
  • 994
  • 1
  • 11
  • 15
  • 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 [mcve]? – jonrsharpe Oct 12 '17 at 14:21
  • Do you get any strange response/header from the OPTIONS response? – sz tech Oct 12 '17 at 14:23
  • Here is the request angular sending https://pasteboard.co/GOBkz3Z.png And response is empty Array() (since i'm using print_r($_POST) in server side (php). – Osama Sheikh Oct 12 '17 at 14:58
  • Possible duplicate of [Angular2 - Http POST request parameters](https://stackoverflow.com/questions/35212341/angular2-http-post-request-parameters) – AT82 Oct 14 '17 at 10:34

3 Answers3

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();
Kalle Richter
  • 8,008
  • 26
  • 77
  • 177
Osama Sheikh
  • 994
  • 1
  • 11
  • 15
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

JayDeeEss
  • 1,075
  • 9
  • 14
  • 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 Oct 12 '17 at 14:53
  • 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 https://pasteboard.co/GOBkz3Z.png – Osama Sheikh Oct 12 '17 at 15:02
  • check this answer, might be helpful! [link](https://stackoverflow.com/a/21783145/7764151) – JayDeeEss Oct 12 '17 at 15:04
  • i was finally able to solve the issue, Thank you so much for your help guys – Osama Sheikh Oct 12 '17 at 18:31
  • great ! - you should post your solution whenever you get time for future references! – JayDeeEss Oct 12 '17 at 18:32
  • just did :-), Thanks again! really appreciate the help. – Osama Sheikh Oct 12 '17 at 18:34
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', 'adam@example.com');

this.http.post('http://myapiserver.com', formdata).subscribe(
    res => {
        const response = res.text();
    }
);
lt.price
  • 79
  • 1
  • 7