Angular 2 Rest Service-Anfrage

Question

Ich habe a.net Wep API-Dienst, der gut funktioniert. Wenn ich Daten von Angularjs App.browser Konsole erhalten möchte gab mir diesen Fehler.

getCurrentFeed() :Observable<Tweet[]>{ 

    return this.http.get('http://localhost:6010/GetTweets').map((resp :Response)=>{ 
    console.log(resp.json()); 
    var fetchedTweets=[]; 
    for(let tweet of resp.json().data) 
    { 
    fetchedTweets.push(this.getTweetFromJson(tweet)); 

    } 
    return fetchedTweets as Array<Tweet>; 
}); 

} 

XMLHttpRequest kann http://localhost:6010/GetTweets nicht laden. Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden. Ursprung 'http://localhost:4200' ist daher nicht erlaubt. error_handler.js: 54 AUSNAHME: Antwort mit Status: 0 für URL: null

Answer 1

Da Ihre Clientanwendung von einem Dev-Server bedient wird, der auf dem Port 4200 ausgeführt wird, darf der Client nur dann auf andere Server zugreifen, wenn sie dies tun speziell konfiguriert, um den Zugriff auf Ihren Client zu ermöglichen.

Sie müssen die Server-Kopfzeile nicht im Dev-Modus konfigurieren. Konfigurieren Sie einfach einen einfachen Proxy auf dem Client. Erstellen Sie eine Datei proxy-conf.json in der Wurzel Ihres Projekts mit folgendem Inhalt:

{ 
    "/GetTweets": { 
    "target": "http://localhost:6010", 
    "secure": false 
    } 
} 

Dann entfernen Sie den vollständigen DNS-Namen aus dem Code

this.http.get('/GetTweets') 

schließlich zu sein, führen Sie Ihre Anwendung als folgt:

ng serve --proxy-config proxy-conf.json 

Ihr Server, der auf 4200 läuft Ihre get Anforderungen umleiten, die/GetTweets in der URL auf den Server, der auf 6010 läuft, und Sie werden diese Fehler nicht bekommen.