2017-02-10 4 views
0

Ich habe Asp.net Web API-Projekt erstellt.
Wenn ich sehe http://localhost:55858/api/myData
esWie ionischen Rahmen Daten von asp.net erhalten Web API

kehrt
<ArrayOfquoteMain> 

<quoteMain> 
<despt>Hello , data 1</despt> 
<id>1</id> 
<reference>Hello data 1</reference> 
</quoteMain> 

<quoteMain> 
<despt>Hello , data 2</despt> 
<id>2</id> 
<reference>Hello data 2</reference> 
</quoteMain> 

<quoteMain> 
<despt>Hello , data 3</despt> 
<id>3</id> 
<reference>Hello data 3</reference> 
</quoteMain> 

</ArrayOfquoteMain> 

Ich möchte nur in meiner ionischen App diese Daten als Liste anzeigen.
Ich habe Ionic App mit ionic start ionic2-http blank --v2 erstellt.
Aber ich kann nicht mit meiner asp.net Web API verwenden.

Antwort

-1

Ist der Fehler No 'Access-Control-Allow-Origin'...? Wenn ja, müssen Sie in Ihrem Ionenprojekt mit CORS umgehen.

CORS ist nur ein Problem, wenn wir unsere App ausführen oder testen, wenn ionic serve ausgeführt wird.

dies in Ihrem ionischen Projekt zu aktivieren, ändern Sie die ionic.config.json den proxies Tag enthält:

{ 
    "name": "myionicproj", 
    "app_id": "", 
    "v2": true, 
    "typescript": true, 
    "proxies": [ 
    { 
     "path": "/api", 
     "proxyUrl": "http://localhost:55858/api" 
    } 
    ] 
} 

Die Proxy-URL die URL Ihres .NET Web-api ist lokal ausgeführt. Sie können es durch Ihre Umgebungs-URL ersetzen.

Um die Ergebnisse in console.log in Ihrer Typoskript Klasse anzuzeigen:

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

import {Http} from "@angular/http"; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    constructor(public http: Http) { 

    this.http.get('http://localhost:8100/api/myData').map(res => res.json()).subscribe(data => { 
     console.log(data); 
    }); 
    } 

} 

http://localhost:8100 Ihre ionische localhost ist. Es Proxy der .net web api http://localhost:55858/api Endpunkt über Ihren lokalen ionischen Server http://localhost:8100/api

+0

Der obige Code ist für Demonstrationszwecke. Für die beste Vorgehensweise müssen Sie einen Dienst erstellen, den Sie injizieren müssen. – alltej