2017-02-04 122 views
0

我是Ionic的新手。我的打字稿文件是這樣的:Ionic 2:在應用程序內部加載外部內容

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 的錯誤出現在是離子的發球局中我的電腦或我的電話。我該怎麼做才能解決? 我想也加載它作爲組件「templateUrl:'somehtml'」,但將來我想在我的應用程序中加載一些JSON數據。謝謝。

+0

我想你會很難搭上從GET請求中獲得完整的URL。存在一些嚴重的安全風險。我會很驚訝,即使你確實得到它的工作,它會被應用程序商店所接受。如果它自己的代碼庫,那麼你需要創建一個Api,它將與GET請求 – 2017-02-04 08:21:37

+0

交互我有它(一個SOAP和一個REST webservice);這僅僅是爲了學習的目的。應該遵循的路線是什麼?它是不同的,如果我想加載模板或一些JSON數據或數組? –

回答

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

離子將您的外部資源映射到您指定的路徑。 在注意到之後,我不得不解決一些與此無關的問題,但最終我做了我想做的事情,並且我注意到反XSS策略有多棒。希望我會幫助別人。

+0

您是否正在加載html並將其綁定到您的應用程序? –

+0

@AvishaiPeretz我打算用這個來獲取一些JSON數據,但它也可以使用html –

+0

我可以只加載HTML內容的一部分嗎? –