Making http POST request in Angular 2 - angularjs

Question

I want to make the following POST request in Angular 2.
http://gearman.local.eviry.com/info
with body as the following
{"gearman_servers" :[{
"name" : "server 1",
"addr" : "192.168.1.115"
},
{
"name" : "Server 2",
"addr" : "192.0.1.126"
}
]}
I have made sure that this works outside Angular 2. (Using POSTMAN)
I have also made sure that there is CORS enabled.
Following is my angular code
var url = 'http://gearman.local.eviry.com' +
'/info';
var GEARMAN_DATA = {"gearman_servers" :[{
"name" : "server 1",
"addr" : "192.168.1.115"
},
{
"name" : "Server 2",
"addr" : "192.0.1.126"
}]};
let body = JSON.stringify(GEARMAN_DATA);
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
this.http.post(url, body, options)
.map(res => res.json())
.subscribe(
data => {console.log(data);},
err => this.logError(err),
() => console.log('Fetching complete for Server Metrics')
);
logError(err:Response){
console.log("some error");
console.log(err);
}
However, doing this gives me an error
XMLHttpRequest cannot load http://gearman.local.eviry.com/info. Invalid HTTP status code 405
Also, when I print out the error inside the logError function, I get the following:
http://grab.by/O7s8
It is difficult to make out what is wrong with the request.
Request Headers are as shown
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:gearman.local.eviry.com
Origin:http://evil.com/
Pragma:no-cache
Referer:http://localhost:3000/gearman-ui/job-queue
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36
X-FirePHP:0.4.4
X-FirePHP-Version:0.4.4
X-Wf-Max-Combined-Size:262144
Response headers are as shown
Allow:POST
Cache-Control:no-cache
Connection:Keep-Alive
Content-Length:4519
Content-Type:text/html; charset=UTF-8
Date:Mon, 15 Feb 2016 08:32:54 GMT
Keep-Alive:timeout=5, max=100
Server:Apache/2.2.24 (Unix) mod_ssl/2.2.24 OpenSSL/1.0.1e-fips
If anybody uses POSTMAN, I have the following code which works. I have to implement the same using angular.(Note that you wont be able to access http://gearman.local.eviry.com)
https://www.getpostman.com/collections/f14ecaf29ffd52a54534

Answer 1

I made a try with your request (see this plunkr: http://plnkr.co/edit/6sbNYgIlCMNLkyyRerEk?p=preview) and appears that the reponse of your preflighted request isn't correct:
XMLHttpRequest cannot load http://gearman.local.eviry.com/info. Response for preflight is invalid (redirect)
After having a look at the reponse of this one, I have the following:
General
Request URL:http://gearman.local.eviry.com/info
Request Method:OPTIONS
Status Code:302 Found
Remote Address:49.212.179.100:80
Response Headers
Connection:close
Content-Length:293
Content-Type:text/html; charset=iso-8859-1
Date:Mon, 15 Feb 2016 08:12:44 GMT
Location:https://gearman.local.eviry.com/info
Server:Apache
Request Headers
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,fr-FR;q=0.6,fr;q=0.4
Access-Control-Request-Headers:content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:gearman.local.eviry.com
Origin:http://run.plnkr.co
Pragma:no-cache
Referer:http://run.plnkr.co/IwOhToeVuXn1o1a4/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.109 Safari/537.36
The 302 status code for this request is the problem I think. Moreover I didn't see any CORS headers in its response...