My Rest Api Does Not Run With Ionic-2 - node.js

Question

I have made a rest api for my ionic-2 android app but my http request cannot get data from my rest api service
I made a rest api with node.js and source code here
server.js
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({
extended:true
}));
app.use(bodyParser.json());
var port = process.env.PORT || 8080;
var router = express.Router();
router.get('/',function(req,res){
res.json({
"message":"hello world"
});
});
app.use('/api',router);
app.listen(port);
console.log("Listening Port");
package.json
{
"name": "node-api",
"main": "server.js",
"dependencies": {
"express": "~4.0.0",
"mongoose": "~3.6.13",
"body-parser": "~1.0.1"
}
}
I pushed on heroku service and its address here
my heroku rest api link
My ionic2 app from another directory here
home.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import {Http} from '#angular/http';
import 'rxjs/add/operator/map';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
data:any;
constructor(public navCtrl: NavController,http:Http) {
http.get("https://appish.herokuapp.com/api")
.map((res) =>res.json())
.subscribe((data)=>{
this.data = JSON.stringify(data);
})
}
}
home.html
<ion-header>
<ion-navbar>
<ion-title>
Api
</ion-title>
</ion-navbar>
<ion-content padding>
{{data}}
</ion-content>
When I run this code with 'ionic serve' there is no error and no data but if I try other json sites to get data,it is running for example
i am trying ip.jsontest.com
I can get data
Where is the problem
Thank You
~

Answer 1

This looks like a CORS issue.
Try adding this to the beginning of your server.js and see if it resolves your issue.
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
If that doesn't work, you should take a look at the network tab in your browsers debugging tool. If you get a response and can see the data, it is an error in your ionic code. If you don't get any data, it's a problem with your server code or with the connection to the server.

Answer 2

Replaced server.js
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({
extended:true
}));
//answer is here..
app.use(function(req,res,next){
res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept");
next();
});
///
app.use(bodyParser.json());
var port = process.env.PORT || 8080;
var router = express.Router();
router.get('/',function(req,res){
res.json({
"message":"hello world"
});
});
app.use('/api',router);
app.listen(port);
console.log("Listening Port");