localhost REST API request error ionic2 angular2

Question

I am making a get/post request to my locally hosted REST API server in an Ionic 2 app. The errow below shows up afer a couple of seconds.

3 387557 group EXCEPTION: Response with status: 0 for URL: null

4 387558 error EXCEPTION: Response with status: 0 for URL: null

5 387558 groupEnd

6 387568 error Uncaught Response with status: 0 for URL: null, http://localhost:8100/build/js/app.bundle.js , Line: 88826

I am able to make a successful curl request to the local server. Here is my code for reference.

app.js

var express = require("express");
var mysql   = require("mysql");
var bodyParser  = require("body-parser");
var SHA256 = require("sha256");
var rest = require("./REST.js");
var app  = express();

function REST(){
  var self = this;
  self.connectMysql();
};

REST.prototype.connectMysql = function() {
  var self = this;
  var pool      =    mysql.createPool({
    connectionLimit : 100,
    host     : 'host',
    user     : 'user',
    password : 'password',
    database : 'database',
    debug    : false
  });
  pool.getConnection(function(err,connection){
    if(err) {
      self.stop(err);
    } else {
      self.configureExpress(connection);
    }
  });
}

REST.prototype.configureExpress = function(connection) {
  var self = this;
  app.use(bodyParser.urlencoded({ extended: true }));
  app.use(bodyParser.json());
  var router = express.Router();
  app.use('/api', router);
  var rest_router = new rest(router,connection,SHA256);
  self.startServer();
}

REST.prototype.startServer = function() {
  app.listen(3000, function() {
    console.log("All right ! I am alive at Port 3000. OKAY BUDDY");
  });
}

REST.prototype.stop = function(err) {
  console.log("ISSUE WITH MYSQL n" + err);
  process.exit(1);
}

new REST();

REST.js

var mysql = require("mysql");

function REST_ROUTER(router, connection, SHA256) {
  var self = this;
  self.handleRoutes(router, connection, SHA256);
}

REST_ROUTER.prototype.handleRoutes= function(router,connection,SHA256) {
  router.get("/",function(req,res){
    res.json({'foo': 'bar'});
  });
});

login.js (component)

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {AuthProvider} from '../../providers/auth/auth';

/*
  Generated class for the LoginPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'build/pages/login/login.html',
  providers: [AuthProvider]
})
export class LoginPage {
  static get parameters() {
    return [[NavController], [AuthProvider]];
  }

  constructor(nav, AuthProvider) {
    this.nav = nav;
    this.authProvider = AuthProvider;
    this.form = {};
  }

  login(form) {
    this.authProvider.login(form).then(res => {
      alert(JSON.stringify(res));
    });
  }
}

auth.js (provider)

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the Auth provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class AuthProvider {
  static get parameters(){
    return [[Http]]
  }

  constructor(http) {
    this.url = 'http://localhost:3000/api';
    this.http = http;
  }

  login(form) {
    return new Promise(resolve => {
      this.http.get(this.getUrl)
        .map(res => res.json())
        .subscribe(data => {
          resolve(data);
        });
    });
  }
}

Answer 1

I had the same problem, and was able to resolve it. I was serving my API on localhost:8000. When ionic makes a request to localhost or 127.0.0.1, I think it is blocked. I instead found my computer's IP address and hosted my webserver on 0.0.0.0:8000 and instead of hitting http://localhost:8000/api/my/endpoint I hit http://mycomputerip:8000/api/my/endpoint , and it worked!

Answer 2

You are trying to request empty URL bacause of typo in auth.js login function:

this.http.get(this.getUrl)

this.getUrl is not defined in your code samples. Easy fix:

this.http.get(this.url)