1

I need to develop a hybrid app for my website using ionic for UI and i am using node js for APi creation. The problem is am able to access the API through the browser if i call the same API from my angularjs i am not able to retrieve the response. this is the code at node js side:

var app = require('express')(); 
var http = require('http').Server(app); 
var mysql = require('mysql'); 
var bodyParser = require("body-parser");

var connection = mysql.createConnection({ 

    host : 'localhost',
    user : 'root',
    password : 'root',
    database : 'student',
});

app.use(bodyParser.urlencoded({ extended: false }));

app.use(bodyParser.json()); 

app.get('/stud',function(req,res){

    connection.query("SELECT * from stu_details",function(err, rows, fields){

        if (err) throw err;

        res.contentType('application/json');
        console.log("entered");
        res.send(JSON.stringify(rows));
        res.end();

    });

});

code at angularjs:

var app1 = angular.module('starter', ['ionic']);
app1.controller('mycontrl',function($scope,$http){

    $http.get("http://127.0.0.1:3000/stud")
    .then(function(response) {

        $scope.names = response.body;
    })
});

The thing is that at the angular side it is not entering into the "then" function; i.e., the response is not succeeding. But I am able to get the body part if I call from my browser.

Aᴍɪʀ
  • 7,623
  • 3
  • 38
  • 52
valarmathi
  • 35
  • 7
  • Check the network tab in your browser's web inspector tool. What response are you getting when the http call is made? Are you getting any errors in the console? – Shaun Scovil Dec 30 '15 at 04:49
  • Did my post answer your question? – Aᴍɪʀ Dec 31 '15 at 16:41
  • ya in the inspector tool i could get the response, but in angular js its not coming. $http service call is not getting promise value always entering into failure. – valarmathi Jan 04 '16 at 04:46

2 Answers2

0

That's because your app is running on a different port. Probably 8100, and your express app is running on 3000. And that request is a cross-domain ajax request. There are a few ways to solve the problem.

  1. Using Ionic itself to create a proxy for your API. recommended

    Add or edit ionic.project file to your project and configure it:

    {
  "name": "your-app",
  "app_id": "",
  "proxies": [
    {
      "path": "/stud",
      "proxyUrl": "http://127.0.0.1:3000/stud"
    }
  ]
}

    Then you can normally request /stud on your app, Ionic will proxy that request to your express app. You can add more of these rules to the array above.

    More information on this here and here.

  2. Enable cross-origin resource sharing (CORS) in your express app.

    You can find how to so on this thread.

  3. Installing extensions on your browser to allow CORS, but I'd not recommend this as it might cause problems visiting other websites.

Also, if you are using this kind of architecture, for security reasons you might use https on your API.

Community
  • 1
  • 1
Aᴍɪʀ
  • 7,623
  • 3
  • 38
  • 52
0

The problem has been solved once i added the following module at the server side.

var cors = require('cors');

app.use(cors());

valarmathi
  • 35
  • 7