full error message : POST http://localhost:4200/api/user/login 504 (Gateway Timeout)
when trying to create a login function in my angular app and have it communicate with the express backend i get the 504 error shown above. I’ve included snippets of what i think is all the relevant code below.
running on localhost:4200 trying to reach localhost:3000 that the server is being run on.
app.js
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const url = 'mongodb+srv://josh:*******@cluster0.cwv6f.mongodb.net/Unionise?retryWrites=true&w=majority';
const User = require('./models/user.model');
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended : false}))
app.post('/api/user/login', (req, res) => {
mongoose.connect(url,{ useMongoClient: true }, function(err){
if(err) throw err;
User.find({
username : req.body.username, password : req.body.password
}, function(err, user){
if(err) throw err;
if(user.length === 1){
return res.status(200).json({
status: 'success',
data: user
})
} else {
return res.status(200).json({
status: 'fail',
message: 'Login Failed'
})
}
})
});
})
app.get('/api/user/login', (req, res) => {
res.send('Hello World!')
})
app.listen(3000, () => console.log('blog server running on port 3000!'))login.component.ts
import { AppService } from './../app.service';
import { Component, OnInit } from '@angular/core';
import { LoginService } from './login.service';
import { User } from '../models/user.model';
import { response } from 'express';
import { Console } from 'console';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
providers: [ LoginService ]
})
export class LoginComponent implements OnInit {
public user : User;
success = "";
constructor(private loginService: LoginService, public appService: AppService) {
this.user = new User();
}
validateLogin() {
if(this.user.username && this.user.password) {
this.loginService.validateLogin(this.user).subscribe(result => {
console.log('result is ', result);
}, error => {
console.log('error is ', error);
});
} else {
alert('enter user name and password');
}
}
ngOnInit(): void {
// this.appService.login().subscribe(
// response=>{
// this.success = response.status;
// console.log(this.success);
// },
// error => {}
// );
}
}login.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from '../models/user.model';
@Injectable()
export class LoginService {
constructor(private http: HttpClient){
}
validateLogin(user: User){
return this.http.post('/api/user/login',{
username : user.username,
password : user.password
})
}
}routing
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
const routes: Routes = [
{ path: '', component: LoginComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }proxy
{
"/api/*": {
"target": "http://localhost:3000",
"secure": "false"
}
}Command console errors:
Angular app
<e> [webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/api/user/login to http://localhost:3000/ [ECONNRESET] (https://nodejs.org/api/errors.html#errors_common_system_errors)
server
C:UsersjoshkDocumentsGitHubUnioniseservernode_modulesmongooselibhelperspromiseOrCallback.js:20
throw error;
^
MongoParseError: option usemongoclient is not supported
at parseOptions (C:UsersjoshkDocumentsGitHubUnioniseservernode_modulesmongodblibconnection_string.js:289:15)
at new MongoClient (C:UsersjoshkDocumentsGitHubUnioniseservernode_modulesmongodblibmongo_client.js:62:63)
at C:UsersjoshkDocumentsGitHubUnioniseservernode_modulesmongooselibconnection.js:784:16
at new Promise (<anonymous>)
at NativeConnection.Connection.openUri (C:UsersjoshkDocumentsGitHubUnioniseservernode_modulesmongooselibconnection.js:781:19)
at C:UsersjoshkDocumentsGitHubUnioniseservernode_modulesmongooselibindex.js:340:10
at promiseOrCallback (C:UsersjoshkDocumentsGitHubUnioniseservernode_modulesmongooselibhelperspromiseOrCallback.js:10:12)
at Mongoose._promiseOrCallback (C:UsersjoshkDocumentsGitHubUnioniseservernode_modulesmongooselibindex.js:1140:10)
at Mongoose.connect (C:UsersjoshkDocumentsGitHubUnioniseservernode_modulesmongooselibindex.js:339:20)
at C:UsersjoshkDocumentsGitHubUnioniseserverapp.js:20:11
Node.js v17.4.0Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
Your problem is that You’re creating connection when request comes in.
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const url = 'mongodb+srv://josh:*******@cluster0.cwv6f.mongodb.net/Unionise?retryWrites=true&w=majority';
const User = require('./models/user.model');
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended : false}))
app.post('/api/user/login', async (req, res) => {
try {
const query = {
username: req.body.username,
password: req.body.password,
};
const user = await User.findOne(query).lean();
if (!user) {
return res.status(200).json({
status: 'fail',
message: 'Login Failed'
});
}
res.status(200).json({
status: 'success',
data: user
});
}
catch (error) {
console.error(error.message);
res.status(500).end();
}
})
app.get('/api/user/login', (req, res) => {
res.send('Hello World!')
})
const PORT = process.env.PORT || 3000;
// CONNECTION MUST BE ONCE AT START!
mongoose.connect(
url, {},
(err) => {
if (err) {
console.error('DB: fail');
console.error(err.message);
process.exit(1);
}
console.log('DB: connected');
app.listen(PORT, () => console.log('blog server running on port', PORT));
});All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0