implementation of post web service in ionic 2 using angular2

Question

I'm trying to implement post webservice in angular2. I have tried to hit the URL through postman and its working. But when i'm trying to implement it in angular, I'm not getting any response. The following is my code sample:

 load(username, password) {

        console.log(username,"  ", password);
        let postData = {"username":username, "password" : password, 
                "userdeviceInfo": [{
                "deviceId": "APA91bGUZuKVbqur7Qq2gy2eyomWgXkIU5Jcmmtmgl4IGuzVzwiJVMZgAHj3Bx6yrnW0oEZlEtB9XdcR6AOpKyEMVSWwQ_UIfNX6T0iwq28hnufOhauVdTYZQSWWPAdDrdg58cjnL5T-",
                "platform":"Android"
                          }]};

        //let body= JSON.stringify(postData); 

      //console.log("body---"+body)

        this.headers = new Headers();
            this.headers.append("Content-Type", 'application/json');

            this.requestoptions = new RequestOptions({
                method: RequestMethod.Post,
                url: this.url,
                headers: this.headers,
                body: JSON.stringify(postData)
            })

    console.log("body---"+this.requestoptions)

    return this.http.request(new Request(this.requestoptions))
                .map((res: Response) => {
                    if (res) {

                      console.log(res.json());
                        return [{ status: res.status, json: res.json() }];
                    }})
               .subscribe(res => this.data = res);

the error i'm recieving is:

XMLHttpRequest cannot load "MY_URL". Response for preflight has invalid HTTP status code 500

I'm kind of stuck here. Can anyone help me find where am i going wrong?

`Response for preflight has invalid HTTP status code 500` this is likely a cors issue — Suraj Rao, Jan 19 '17 at 06:47
well the error is preflight so before actual request and code 500 has to do with server error..maybe check server side log? — Suraj Rao, Jan 19 '17 at 06:55
server logs doesn't show anything. Can u tell me what does subscribe do — manish kumar, Jan 19 '17 at 07:32
subscribe is a method to call an observable and receive its response.. check out http://stackoverflow.com/a/34672550/4826457 — Suraj Rao, Jan 19 '17 at 07:35
is there anything wrong in the code above because when i tried my web service on postman, it works. but through my code it shows error — manish kumar, Jan 19 '17 at 07:52
I don think there is an issue.. but generally you use `this.http.post(url,body,requestoptions)` instead of `this.http.request` directly. Also cannot know what headers your server is expecting.. — Suraj Rao, Jan 19 '17 at 07:55
[this](http://stackoverflow.com/questions/34755350/using-http-rest-apis-with-angular-2/34758630#34758630) is the link i refered — manish kumar, Jan 19 '17 at 08:09
also tried this.http.post(url, body, requestoptions) earlier....same error there too — manish kumar, Jan 19 '17 at 08:11

score 0 · Answer 1 · answered Jan 19 '17 at 11:32

here is a POST example:

rate(url: string, body: { value: number}) {
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });

  return this.http.post(url, body, options).toPromise().then(
          response => response.json(),
          err => err
  );
}

Of course you can delete toPromise() to use observables, this is for an example app :)

hope this can help you.

score 0 · Answer 2 · answered Jan 19 '17 at 13:28

0

You can use this way to make a http post :

let headers = new Headers();
let body = {"username":username, "password" : password, 
                "userdeviceInfo": [{
                "deviceId": "APA91bGUZuKVbqur7Qq2gy2eyomWgXkIU5Jcmmtmgl4IGuzVzwiJVMZgAHj3Bx6yrnW0oEZlEtB9XdcR6AOpKyEMVSWwQ_UIfNX6T0iwq28hnufOhauVdTYZQSWWPAdDrdg58cjnL5T-",
                "platform":"Android"
                          }]};

headers.append('content-type', 'application/json');
return this.http.post("theurl", '', {
    body : JSON.stringify(body),
    headers : headers
})
.map(res => res.json())
.subscribe(data=>{

},
err=>{

},
()=>{

})

answered Jan 19 '17 at 13:28

Bala Abhinav

1,328
1
9
15

giving the same error. it has something to do with 'cors', i checked...can you help with 'CORS' – manish kumar Jan 20 '17 at 04:28
If it is a CORS issue then install the CORS extension on your chrome browser and enable CORS, it will work. Or if you want it to be handled in the mobile app, the plugin cordova-whitelist should be installed which handles CORS. By default, the latest versions of ionic will include this plugin in the config.xml and build the app along with it.. – Bala Abhinav Jan 20 '17 at 04:32
Also console.log and check the value of this.url before making POST request.. It is throwing a 500 error which means internal server error.. – Bala Abhinav Jan 20 '17 at 04:34
-XMLHttpRequest cannot load http://172.16.4.232:8080/GNE_CONF/mobile/doLogin_mobile. Response for preflight has invalid HTTP status code 500 and XHR failed loading: POST "http://172.16.4.232:8080/GNE_CONF/mobile/doLogin_mobile".- This is my complete error – manish kumar Jan 20 '17 at 04:45
i have added CORS extension already and also plugin is present, but still it throws this error. i have seen videos over youtube for http post request...still it got me no where – manish kumar Jan 20 '17 at 04:47
Did you install the chrome extension "CORS" ? also, curious to know which backend you are using.. – Bala Abhinav Jan 20 '17 at 04:48
What back-end are you using for your api? – Bala Abhinav Jan 20 '17 at 04:53
[this](https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en) is the extension I've added and I'm using apache tomcat server. – manish kumar Jan 20 '17 at 04:54
This is a great tool to have to test your rest api's. Try simulating the POST request using this https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop?hl=en – Bala Abhinav Jan 20 '17 at 05:00
looks like my server doesn't have CORS enabled – manish kumar Jan 20 '17 at 05:43
which language have you written your server in php,java,..?? – Bala Abhinav Jan 20 '17 at 06:22
it is written in java – manish kumar Jan 20 '17 at 06:25

implementation of post web service in ionic 2 using angular2

2 Answers2