Angular2 http.get (url) returns 404 to a valid url - no CORS problem

Question

I have an Angular2 application that is trying to make a call to my Django server.

I have a function called getObjects that calls an external API call and should return a list of objects. As some debugging, I am currently creating an XMLHttpRequest that correctly grabs data from my server.

However, when I try to make a request using Http.http.get (url), I see a 404 error. I tried working with several HTTP headers and also played with some settings on my server, but I can’t understand what is wrong.

I guess the Http.http.get () method does something funky behind the scenes that I don't know about. The strangest thing is that on my dev-network tab of my browser there is not even an attempt to get to my external browser.

Any help in this matter would be greatly appreciated, I can provide any additional debugging information and really use the point in the right direction.

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

I managed to find a fix in another question:

Angular 2 HTTP GET returns URL null

The problem was using InMemoryWebApiModule, and the solution was to add the following configuration to the app.module.ts file:

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

.

Answer 2

404, . subscribe() . :

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

: http://reactivex.io/rxjs/manual/index.html

Answer 3

This may be a problem with angular2 -in-memory-web-api. I had the same problem, but when I uninstalled InMemoryWebApiModulefrom AppModule, the API calls worked fine.