Ionic 2 Http POST Methot ERROR

Ionic Framework ionic-v3
1

Hi Im going to call http post method using ionic 2.but in the response always im getting error.can any one help me.

this is my json type

{ “username”:”user”, "password":”pass" }
This is my code

import {Page, NavController} from 'ionic-angular';
import {Http, Headers, RequestOptions} from 'angular2/http';
import 'rxjs/Rx';
@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(http: Http, nav: NavController) {
    this.http = http;
    this.makePostRequest();
  }

  makePostRequest() {

    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    this.http.post('url',
      JSON.stringify({ username: 'admin', password: 'a' }),
      { headers: headers })
      .map((res: Response) => res.json())
      .subscribe((res) => console.log("res", res));

  }

}

error Log

4     236980   log      DEVICE READY FIRED AFTER, 1437, ms
5     237420   group    EXCEPTION: [object Object]
6     237426   error    EXCEPTION: [object Object]
7     237431   error    STACKTRACE:
8     237433   error    
9     237435   groupEnd 
10    237525   error    Uncaught #<Response>, http://192.168.1.13:8100/build/js/app.bundle.js, Line: 7834

How can i solve this.?

2

Most probably you have an error in the request (e.g. in your example you have 'url' which is not a valid URL address and would cause an error like this, or if the URL is not accessible due to security restrictions, etc.). I just tried the code with a real URL and it works fine. In case that this doesn’t solve your problem, could you please provide a plnkr/codepen where it’s reproducible (you can fork and update this plnkr environment).

1 Like
3

Hi
can you please try once with
JSON.stringify({ "username": "admin", "password": "a" }),

and see what happens.

1 Like
4

ok.ill update codepen…This is my error log in browser

Failed to load resource: the server responded with a status of 403 (Forbidden)
(index):1 XMLHttpRequest cannot load http://url/login/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 403.
app.bundle.js:67773 error Response_body: ProgressEventbubbles: falsecancelBubble: falsecancelable: falsecurrentTarget: XMLHttpRequestonabort: undefinedonerror: undefinedonload: undefinedonloadend: undefinedonloadstart: undefinedonprogress: undefinedonreadystatechange: undefinedontimeout: undefinedreadyState: 0response: ""responseText: ""responseType: ""responseURL: ""responseXML: nullstatus: 0statusText: ""timeout: 0upload: XMLHttpRequestUploadonabort: nullonerror: nullonload: nullonloadend: nullonloadstart: nullonprogress: nullontimeout: null__proto__: XMLHttpRequestUploadconstructor: XMLHttpRequestUpload()arguments: nullcaller: nulllength: 0name: "XMLHttpRequestUpload"prototype: XMLHttpRequestUploadconstructor: XMLHttpRequestUpload()arguments: nullcaller: nulllength: 0name: "XMLHttpRequestUpload"prototype: XMLHttpRequestUpload__proto__: XMLHttpRequestEventTarget()<function scope>onabort: (...)onerror: (...)onload: (...)onloadend: (...)onloadstart: (...)onprogress: (...)ontimeout: (...)Symbol(Symbol.toStringTag): "XMLHttpRequestUpload"__proto__: XMLHttpRequestEventTarget__proto__: XMLHttpRequestEventTarget()<function scope>onabort: (...)onerror: (...)onload: (...)onloadend: (...)onloadstart: (...)onprogress: (...)ontimeout: (...)Symbol(Symbol.toStringTag): "XMLHttpRequestUpload"__proto__: XMLHttpRequestEventTargetwithCredentials: false__proto__: XMLHttpRequestdefaultPrevented: falseeventPhase: 0isTrusted: trueisTrusted: truelengthComputable: falseloaded: 0path: Array[0]returnValue: truesrcElement: XMLHttpRequesttarget: XMLHttpRequesttimeStamp: 2726.8050000000003total: 0type: "error"__proto__: ProgressEventheaders: Headers_headersMap: Mapsize: (...)__proto__: Map<entries>[0]No Entries__proto__: Objectstatus: 200statusText: "Ok"type: 3url: null__proto__: ObjectarrayBuffer: ()blob: ()constructor: Response(responseOptions)arguments: [Exception: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context.
    at Function.remoteFunction (<anonymous>:3:14)]caller: (...)length: 1name: "Response"prototype: Object__proto__: ()<function scope>json: ()arguments: (...)caller: (...)length: 0name: ""prototype: Object__proto__: ()<function scope>text: ()__proto__: Object
5

Same result :frowning:

6

@kosalam2 just to make sure that we’re on the same page here - http.post() expects a valid (and real) URL as a first parameter (because http://url/login/ is not a valid URL), e.g. something like https://github.com/login.

Otherwise the No 'Access-Control-Allow-Origin' header error might be thrown either if the URL is not the right one (in case that you’re using a URL of a public service, which might not allow direct URL access and provides an API instead) or when the service/server is not configured properly (in case that you’re using a URL pointing to your own service). In the first case I’ll recommend you to read the documentation of the service. In the second - take a look at this SO question.

Hope this helps.

2 Likes