Angular on localhost gets 404 when consuming GET api from different localhost PORT - CORS issue?

Question

Ever since I switched to the database URL from the in-memory-web-api URL, the Angular app's JavaScript console gives me a 404 error

JavaScript console output 404 error

I've got my angular app running on lite-server using localhost:3035/
I've got a mongodb/nodejs/express database running on localhost:3039/
My angular app was "GET"-ing just fine using the in-memory-web-api url 'api/loggerData'

Any thoughts? Is it CORS? Something else? Do I need to configure the lite-server on the angular side as well?

Here's my angular Code:

private loggerUrl = 'localhost:3039/read/getall/';
getLoggerData(): Promise <Dataset[]> {
    return this.http.get(this.loggerUrl)
        .toPromise()
        .then(response => response.json().data as Dataset[])   
        .catch(this.handleError);
}

Also, I've tried implementing some CORS solutions on the database side that haven't affected anything -

here's some of the database code I modified:

var app = express();

app.use(function (req, res, next) {

//Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3035');

// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 
'GET, POST, OPTIONS, PUT, PATCH, DELETE');

// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true);

// Pass to next layer of middleware
next();
});

It should be private loggerUrl = 'http://localhost:3039/read/getall/'; — eko
– eko, Commented Mar 28, 2017 at 19:34
if @echonax solution doesnt work, then i would bet its a CORS issue. You are going to have to configure your database server to accept CORS requests. — victor
– victor, Commented Mar 28, 2017 at 19:35
@echonax - thanks for the advice - i'd already tried that and what you're seeing was one of many ways i tried to type the url but its good to know that including 'http://' is the correct way. It turns out AJT_82's answer resolved it - an issue with the in-memory-web-api I hadn't seen anyone talk about yet when I was researching this problem. Thanks all again — Jake
– Jake, Commented Mar 28, 2017 at 20:37
@victor - I had attempted multiple CORS solutions with no luck - one of them is left in the express code above. Turns out the answer posted below resolve the issue - something with in-memory-web-api — Jake
– Jake, Commented Mar 28, 2017 at 20:40

AVJT82 · Accepted Answer · 2017-03-28 19:46:20Z

5

No collection errors usually means, that you have left hanging some the equivalent of:

InMemoryWebApiModule.forRoot(InMemoryDataService)

in your ngModule, which interferes when you try and make "real" http-requests. So remove that from your ngModule and you should be good to go! :)

After this you might still run into problems with CORS, but this should fix the current error you get :)

And as mentioned by echonax, you should use the complete url, with http included:

private loggerUrl = 'http://localhost:3039/read/getall/'

answered Mar 28, 2017 at 19:46

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jake Over a year ago

removing in-memory-web-api Import from the app.module file resolved the 404 error - I've looked up and down stack and hadn't seen this yet as a resolution - thanks for your help!

Collectives™ on Stack Overflow

Angular on localhost gets 404 when consuming GET api from different localhost PORT - CORS issue?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related