My Rest Api не работает с Ionic-2

Question

Я сделал отдых api для моего приложения для Android-иона i-2, но мой HTTP-запрос не может получить данные из моего сервиса api-сервиса . Я сделал rest api с node.js и источником код здесь

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" 
    } 
} 

Я нажал на Heroku службу и ее адрес здесь my heroku rest api link

Моего ionic2 приложение из другой директории здесь

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> 

Когда я запускаю этот код с 'ионным служить' нет ошибок и нет данных, но если я попробую другие json-сайты для получения данных, он работает, например, Я пытаюсь ip.jsontest.com я могу получить данные Где это проблема

Thank You ~

Answer 1

Это выглядит как вопрос CORS.

Попробуйте добавить это в начало своего server.js и посмотреть, разрешит ли он вашу проблему.

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(); 
}); 

Если это не сработает, вы должны взглянуть на вкладку сети в инструменте отладки браузеров. Если вы получите ответ и увидите данные, это будет ошибка в вашем ионном коде. Если вы не получаете никаких данных, это проблема с кодом сервера или с подключением к серверу.

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");