angular - 离子从 URL 获取数据

Question

你好，这是我的离子信息，

我正在尝试从它的返回json对象的 url 获取数据。但是我正在使用@angular/http. ionic serve在浏览器（ ）中执行时，这是完美的工作。但是当我在真正的 android 设备上运行这个 apk 时，数据并没有从 url 中获取。这是我的代码，

 this.http.get('https://example.com/api?search='+this.searchInput.value).map(res => res.json()).subscribe(data => {
      this.postalCode = data.data;
  },error => { 
    let alert = this.alertCtrl.create({
      title: 'error',
      subTitle: error,
      buttons: ['Dismiss']
    });
    alert.present();
  });

我的 config.xml，

    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />

我的错误是，

请让我知道需要在这里进行任何配置吗？

标签： angularcordovaionic-frameworkionic3

Answer 1

在离子中，

如果您使用 broswer 作为测试环境，您必须在浏览器中启用跨域资源共享才能使用此功能。

这是我解决这个问题的方法，

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

export class HomePage {
  ServerData: any;

  constructor(
    private HttpAngularProvider: Http,
    private HttpNativeProvider: HTTP,
    .....

  ) {
    this.getPostalCodeFromServer();
  }


  getPostalCodeFromServer() {
    if (this.platform.is('android') || this.platform.is('ios')) {

      this.HttpNativeProvider.get('your_url', {}, { "Content-Type": "application/json" })
        .then(data => {
          var dataReturn = JSON.parse(data.data);
          this.ServerData = dataReturn.data;
        })
        .catch(error => {

        });
    } else {
      this.HttpAngularProvider.get('your_url').map(res => res.json()).subscribe(data => {
        this.ServerData = data.data;

      }, error => {

      });
    }
  }

在真实设备中，您需要通过 ionic-native 发出 http 请求。否则你没有收到数据。