Ionic 2：在应用程序内加载外部内容

Question

我是 Ionic 新手。我的打字稿文件是这样的：

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

import { NavController } from 'ionic-angular';

@Component({
 selector: 'page-about',
 templateUrl: 'about.html'
})
export class AboutPage {
   mypage: any;

  constructor(public navCtrl: NavController, public http: Http) {
        this.http
  .get('http://localhost/xampp/')
  .map(response => response.text())
  .subscribe(html => this.mypage = html);
  }
}

任何 URL，即使在同一个源中，也会导致如下错误：
EXCEPTION: Response with status: 0 for URL: null 该错误出现在我的电脑或 phone 的 ionic serve 上。我应该怎么做才能解决？我也想将它作为组件加载 "templateUrl: 'somehtml'"，但将来我想在我的应用程序中加载一些 json 数据。谢谢。

Answer 1

我自己解决了这个问题。这是一个 CORS 问题，但我在 Ionic 2 上几乎找不到任何关于它的信息。答案在 ionic.config.json 文件中。您必须将这些行添加到 json 项：

"proxies": [
    {
        "path": "/virtualfolder",
        "proxyUrl": "http://www.externalsite.com"
    }
  ]

真正的问题来了。足够？不，当然。回到我的代码，我应该这样做：

this.http
  .get('virtualfolder/someresource.html')
  .map(response => response.text())
  .subscribe(html => this.mypage = html);

Ionic 将您的外部资源映射到您指定的路径中。注意到这一点后，我不得不解决一些与此无关的问题，但它最终达到了我想要的效果，而且我注意到 anti-XSS 政策多么棒。希望我能帮助别人。

Ionic 2：在应用程序内加载外部内容

Ionic 2: loading external content inside the app

html

json

external

ionic-framework