Question

目前，我正在Ionic的一个简单APP中工作，该应用程序从JSON文件检索数据并将其显示在屏幕上。当我在离子服务/实验室中运行该应用程序时，该应用程序可以完美运行，当我尝试模拟它或在实际手机上运行它时，就会出现问题。

我认为该问题可能与无“ Access-Control-Allow-Origin”或与CORS的兼容性有关，但我不知道该怎么办才能解决此问题，因此，我感谢您对此事的了解。

这是我的.ts文件代码：

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

export class Page4Page {

  datalamp: Array<any> = [];
  datosarr: Array<any> = [];

  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {}

  ionViewDidLoad() {
    this.getdata();
    console.log('ionViewDidLoad Page4Page');
  }

  getdata() {
this.http.get('http://caidalibre.000webhostapp.com/data3.json')
  .map((res) => res.json())
  .subscribe(data => {
    this.datalamp = data;
    console.log(this.datalamp)
    this.getlastdata();
  })
  }
  getlastdata() {

    this.datosarr.length = 0;
    console.log(this.datosarr)
    let lastdata = this.datalamp.slice(-1)[0]
    let lasttemp = JSON.parse(lastdata.temperatura);
    let lasthum = JSON.parse(lastdata.humedad_relativa);
    let lastintesidad = JSON.parse(lastdata.intensidad_luminosa);
    let lastbateria = JSON.parse(lastdata.bateria);
    let lastvoltaje = JSON.parse(lastdata.voltaje_panel);
    this.datosarr.push(lasttemp, lasthum, lastintesidad, lastbateria, lastvoltaje)
    console.log(this.datosarr)

  }
}

，对于HTML文件：

<ion-content padding> <ion-item *ngFor="let dat of datosarr"> <p>{{datosarr}}</p> </ion-item> </ion-content>

Answer 1

尝试将其添加到您的config.xml

<allow-navigation href="http://ionic.local/*" />

编辑： 尝试添加：

<allow-intent href="*"/>
<allow-navigation href="http://*/*" />

请记住要删除平台并再次添加。

Answer 2

我遇到了同样的问题

通过更改http

解决

仅适用于浏览器的Angular / http

import { Http } from '@angular/http';

为应用程序使用ionic-native

import { HTTP } from '@ionic-native/http/ngx';

更多细节可以阅读此页面

swich httpclient for ionic

Ionic App无法在Android设备上正常运行

2 个答案: