Getting 404 error with Angular 4 http request

Question

I have the following code in my AngularJS4 project:

const url = "http://localhost:4151/test";
     this.http.get(url).toPromise()
         .then((r) => {
             console.log("SUCCESS", r);
         })
         .catch((e) => {
             console.error("ERR", e);
         });

The URL works fine when typed in the browser bar, and I have enabled CORS headers on the server side:

// Allow CORS
this.app.use(function(req: Request, res: Response, next: Function) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
   next();
});

Whenever I make a call to the server from my Angular application, it returns a 404 - Not Found error.

Any ideas how to fix this?

Thanks.

Stab in the dark. (Side note at my current work I'm also drowning in prod CORS debugging :P). [a] Make sure your server is (actually) setting to allow requests from where your client is running, or all. [b] Can you hit the API endpoint directly? (eg not via the app) (just trying to rule out some things) — Rohan Büchner, Dec 13 '17 at 18:21
Hmm, try to set proxy.conf.json if you are using angular cli. [DOCS](https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md) — Patryk Brejdak, Dec 13 '17 at 18:28

score 4 · Answer 1 · answered Dec 13 '17 at 18:31

In case someone finds this question before the one below.

This was the problem: Angular4 giving 404 for json data that exists and is publicly serving

I had used the tutorial as a base, and was still using the HttpClientInMemoryWebApiModule to intercept http calls. I commented it out and it works fine.

...
// This needed to be commented out vvv
// import { HttpClientInMemoryWebApiModule } from "angular-in-memory-web-api";
// import { InMemoryDataService } from "./services/dataSvc/in-memory-data.service";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        MyRoutingModule,
        HttpClientModule,

        // The HttpClientInMemoryWebApiModule module intercepts HTTP requests
        // and returns simulated server responses.
        // Remove it when a real server is ready to receive requests.
        // This needed to be commented out vvv
        // HttpClientInMemoryWebApiModule.forRoot(
        //     InMemoryDataService, { dataEncapsulation: false }
        // )
    ],
    providers: [MessageService],
    bootstrap: [AppComponent]
})
export class AppModule { }

score 1 · Answer 2 · answered Jun 18 '19 at 16:15

1

HttpClientInMemoryWebApiModule.forRoot(
  InMemoryDataService, { dataEncapsulation: false }
)

Remove the above line from your app.module.ts file. I guess you put this in your project part of learning the httpclient from the documenta

answered Jun 18 '19 at 16:15

Amaranadh Meda

614
4
12

score 0 · Answer 3 · answered Mar 28 '18 at 03:25

0

For someone having the same problem, I fixed by adding "@ResponseBody" on my back-end spring RESTful method.

answered Mar 28 '18 at 03:25

KLMN

529
4
13

Getting 404 error with Angular 4 http request

3 Answers3