Making a POST request in Angular 2 with JSON body

Question

I am making some POST requests using POSTMAN as follows:

This is using POSTMAN and it works just fine. Following is also from POSTMAN

POST /supervisor/stop/process HTTP/1.1
Host: bento
Content-Type: application/json
Cache-Control: no-cache
Postman-Token: 66b05631-8b4e-473a-9d3f-deaa544ecac6

{
"ip" : "192.168.1.115",
"port" : "9001",
"process" : "public_video_convert:video_convert_01"
}

I tried the same thing using Angular 2 as follows:

let url = "http://bento/supervisor/stop/process";
        let data = {
            "ip": "192.168.1.115",
            "port": "9001",
            "process": "public_video_convert:video_convert_01"
        }
        let body = JSON.stringify(data);
        let head = new Headers({
            'Content-Type': 'application/json'
        });

        this.http.post(url, body, {headers : head})
            .map(res =>  res.json())
            .subscribe(
                data => {console.log(data);},
                err => console.log(err),
                () => console.log('Fetching complete for Server Metrics')
            );

When I run this, I get a 405 Method Not Allowed

The details of the request and and the response from dev tools is as follows:

I am not sure how to handle this.

I think the PreFlight request is failing. Do you control the server? HTTP OPTIONS reqyests might not have been enabled there. — Amit Kumar Ghosh
– Amit Kumar Ghosh, Commented Feb 23, 2016 at 11:02

DataPassionate · Accepted Answer · 2017-02-11 18:07:32Z

Short Answer

You are getting the 405 from the server because it does not know how to handle "OPTIONS" requests (hence the "Method Not Allowed" response).

Now the details

This is a "preflight" request that gets sent from the browser if you are sending a "Not Simple" request to a different domain (in this case, your web page is hosted by evil.com and tries to send an xhr to bento). For your example, what makes your request "Not Simple" is the header "Content-type":"application/json".

This happens when your web app makes a cross-origin Request. In general, there are two scenarios:

You are either sending a "simple" request, in which case the browser sends it directly ( With the Origin Header), or, you are sending a "not Simple" request, in which case the browser sends out the preflight request (OPTIONS) to the server first to confirm that the origin is listed in the "Access-Control-Allow-Origin", and then sends out the actual request.

More details on Cross-Origin Resource Sharing here: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Günter Zöchbauer · Accepted Answer · 2016-02-23 11:00:53Z

0

Currently only text is supported by Angulars Http. There are plans to support other body types https://github.com/angular/http/issues/75

answered Feb 23, 2016 at 11:00

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Comments

Thierry Templier · Accepted Answer · 2016-02-23 12:34:06Z

0

I think that you forgot to import the Headers class:

import {Http,Headers} from 'angular2/http';

In this case, your custom headers won't be added to the request. I can't see the Content-Type header into the details of the request and and the response from dev tools you provided. This header should be sent within the request based the code you provided (except the imports).

The server doesn't seem to support the POST method without a JSON content type. That's why you receive a 405 error...

edited Feb 23, 2016 at 12:34

answered Feb 23, 2016 at 11:02

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Collectives™ on Stack Overflow

Making a POST request in Angular 2 with JSON body

3 Answers 3

Short Answer

Now the details

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Short Answer

Now the details

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related