0

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);
        });
    });
  }
}
1
  • Open up app.bundle in your browser and check the line. You should have a map telling you what's what. Commented Jul 6, 2016 at 5:30

2 Answers 2

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!

Sign up to request clarification or add additional context in comments.

Comments

0

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)

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.