Ionic 2 Http POST Methot ERROR


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';
  templateUrl: 'build/pages/home/home.html'
export class HomePage {
  constructor(http: Http, nav: NavController) {
    this.http = http;

  makePostRequest() {

    var headers = new Headers();
    headers.append('Content-Type', 'application/json');'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>,, Line: 7834

How can i solve this.?


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).


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

and see what happens.


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


Same result :frowning:


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

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.