Unable to send POST request via HTTP in Angular 4

Question

I am building a small Angular frontend support by a REST api in the backend, but I have ran into a very strange problem: doing http.post(url, data, params) results in nothing happening (there's no sign the request ever hits the webserver, in Chrome Developer tools there's absolutely no request logged as opposed to this.http.get() requests, which work fine for URLs on the same server).

export class RestComponent {

    constructor ( private http: Http ) {}
    sendStuff() {
        let headers = new Headers({ 'Content-Type': 'application/json' });
        let options = new RequestOptions({ headers: headers });

        this.http.post('http://localhost:3021/api/data', {'data': 3}, options)
            .catch(this.handleError);
    }
}

CORS is enabled on the server
this.http.get on the URL works as expected
there's no evidence in the server logs that the request was ever sent
there's no evidence in Chrome developer tools that the request was sent (no such post request)
logging stuff in the method just before the .post() call shows that everything is as expected (headers, data, etc)
replicating the request in Postman works (identical headers and data)
tried stringyfying the data as well
the error handler does some simple logging, but it's not triggered

I feel quite dumb as it must be something that's fairly obvious yet it escapes me. I've created a simple component which just two methods, one that sends hardcoded data via post and the other that fetches a hardcoded json via get, the second works but the first doesn't.

Would appreciate any pointers.

Thanks!

Possible duplicate of Angular2 HTTP POST request

Jan B.
– Jan B.

2017-05-26 21:38:45 +00:00
Commented May 26, 2017 at 21:38 — Jan B.
– Jan B., Commented May 26, 2017 at 21:38

Pankaj Parkar · Accepted Answer · 2017-05-26 19:57:26Z

5

Essentially you had created just an observable and Observable are lazy in nature. They will get call/emit only when someone has subscribe to them. Hence you have to call subscribe to Observable returned from it to make your code working. Apart from this Everything seems to be perfect.

sendStuff() {
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post('http://localhost:3021/api/data', {'data': 3}, options)
      .catch(this.handleError)
      .subscribe(
       (data) => console.log(data)
    );
}

edited May 26, 2017 at 19:57

answered May 26, 2017 at 19:51

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

2 Comments

Andrei Dascalu Over a year ago

you are absolutely right!!! Thanks! Bonus question: is there a way to call post without having to subscribe (eg: is there a similar method that doesn't return Observable?) - in this case it's a "fire and forget" call, aside from error and possible error code I'm not interested in a response.

Pankaj Parkar Over a year ago

@AndreiDascalu you have to subscribe atleast once to execute/call to observable function once.. You can keep subscribe blank that's upto you.

justin.m.chase · Accepted Answer · 2017-05-26 19:51:50Z

0

There's no server code for us to see but make sure that the route is setup to expect content-type application/json because by default a post route will expect post data, depending on what technology you are using for your server.

Also try just doing a relative path maybe: .post('/api/data')

answered May 26, 2017 at 19:51

justin.m.chase

13.7k9 gold badges61 silver badges111 bronze badges

Collectives™ on Stack Overflow

Unable to send POST request via HTTP in Angular 4

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related