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
– Rohan Büchner, Commented Dec 13, 2017 at 18:21
Hmm, try to set proxy.conf.json if you are using angular cli. DOCS — Patryk Brejdak
– Patryk Brejdak, Commented Dec 13, 2017 at 18:28

Sako73 · Accepted Answer · 2017-12-13 18:31:17Z

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 { }

Amaranadh Meda · Accepted Answer · 2019-06-18 16:15:04Z

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, 2019 at 16:15

Amaranadh Meda

7244 silver badges12 bronze badges

Comments

KLMN · Accepted Answer · 2018-03-28 03:25:06Z

0

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

answered Mar 28, 2018 at 3:25

KLMN

5594 silver badges13 bronze badges

Collectives™ on Stack Overflow

Getting 404 error with Angular 4 http request

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related