Angular2 http.get (URL) gibt 404 auf eine gültige URL zurück - kein CORS-Problem

Question

Ich habe eine Angular2-App ausgeführt, die versucht, einen Anruf an meinen Django-Server zu machen.

Ich habe eine Funktion namens getObjects, die die externe API aufruft und sollte eine Liste von Objekten zurückgeben. Als kleines Debugging mache ich gerade eine XMLHttpRequest, die die Daten von meinem Server korrekt erfasst.

Wenn ich jedoch versuche, eine Anfrage mit Http.http.get (URL) zu machen, sehe ich einen Fehler 404. Ich habe versucht, mit einigen der HTTP-Header herumzuspielen und mit einigen Einstellungen auf meinem Server herumzuspielen, aber ich kann nicht herausfinden, was falsch ist.

Ich nehme an, dass die Http.http.get() -Methode etwas irre hinter den Kulissen tut, von dem ich nichts achte. Das Seltsame ist, dass mein Browser dev-network tab nicht einmal versucht, meinen externen Browser zu erreichen.

Jede Hilfe in der Sache würde sehr geschätzt werden, kann ich zusätzliche Debug-Informationen zur Verfügung stellen und könnte wirklich einen Punkt in die richtige Richtung verwenden.

ng --version 
angular-cli: 1.0.0-beta.24 
node: 6.9.1 
os: win32 x64 
@angular/common: 2.4.3 
@angular/compiler: 2.4.3 
@angular/core: 2.4.3 
@angular/forms: 2.4.3 
@angular/http: 2.4.3 
@angular/platform-browser: 2.4.3 
@angular/platform-browser-dynamic: 2.4.3 
@angular/router: 3.4.3 
@angular/compiler-cli: 2.4.3 

import { Injectable } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 

... 
    constructor(private http: Http) { } 

    getObjects(): Promise<Object[]> { 
    function httpGet(theUrl) 
    { 
     var xmlHttp = new XMLHttpRequest(); 
     xmlHttp.open("GET", theUrl, false); // false for synchronous request 
     xmlHttp.send(null); 
     return xmlHttp.responseText; 
    } 

    var x = httpGet(this.myUrl); 
    console.log(x); // This works perfectly and I see an entry on my server log 

    this.http.get(this.myUrl) 
    .subscribe(res => console.log(res));// This throws a 404 and I see no entry on my server logs nor in my browser network tab 

    var headers = new Headers({'content-type': 'application/json'}); 

    this.http.get(this.myUrl, {headers: headers}) 
    .subscribe(res => console.log(res));// This throws a 404 and I see no entry on my server logs nor in my browser network tab 

    return this.http.get(this.myUrl) 
     .toPromise() 
     .then(response => response.json().data as Object[]) 
     .catch(this.handleError); //The original code that worked on an internal in-memory-api 
    } 

Answer 1

konnte ich eine Arbeits fix in einem anderen Stack-Überlauf Frage finden:

Angular 2 HTTP GET returning URL null

Das Problem war, mit das InMemoryWebApiModule und die Lösung bestand darin, die folgende Konfigurationsänderung in meiner app.module.ts Datei vorzunehmen:

- InMemoryWebApiModule.forRoot(InMemoryDataService), 
+ InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}), 

Durch diese kleine Konfigurationsänderung wurde die Anwendung funktionsfähig.

Answer 2

In der Tat gibt es keine 404, weil Sie Ihre Anfragen nicht ausführen. Sie müssen subscribe() zu ihnen, um sie auszuführen. Einige Beispiele:

this.http.get(this.myUrl).subscribe(res => console.log(res)); 
this.http.get(this.myUrl).subscribe(); 
let response: Observable<Response> = this.http.get(this.myUrl); 
response.subscribe(); 
response.subscribe(v => console.log(v); 

Sie können über Observablen hier lesen: http://reactivex.io/rxjs/manual/index.html

Answer 3

Dies kann ein Problem mit angular2-in-memory-web-api sein. Ich hatte das gleiche Problem, aber als ich die InMemoryWebApiModule aus dem AppModule entfernte, funktionierten die API-Aufrufe perfekt.