We Keep Coding

I don't know why my get request sometimes works but sometimes doesn't (404 not found)

I'm currently learning angular and working on a project with a mongoDB database and express for my APIs. I want to fetch the comments of a post by the post ID,
The get request returns me a list of comments. the problem is when I first run node js the get request doesn't work, it only works when I first post a new comment and then run the get request for the comments again.
And as long as node is running the get request will continue to work whenever it's called for, until I restart node once again for the error to happen again.
it returns a 404 not found error.
This error doesn't happen with any other route, but my code is the same in all of them.
PS : I Have made sure that the function is getting the post id before the get request is made.
this is my server.js file
let express = require('express'),
path = require('path'),
mongoose = require('mongoose'),
cors = require('cors'),
bodyParser = require('body-parser'),
dbConfig = require('./database/db');
//create Error definition
const createError = require('http-errors');
// Connecting with mongo db
mongoose.Promise = global.Promise;
mongoose.connect(dbConfig.db, {
useNewUrlParser: true
}).then(() => {
console.log('Database sucessfully connected')
},
error => {
console.log('Database could not connected: ' + error)
}
)
const userRoute = require('./routes/user.route');
const postRoute = require('./routes/post.route');
const galleryRoute = require('./routes/Gallery.route');
const likeRoute = require('./routes/Like.Route');
const commentRoute = require('./routes/Comment.route');
const shareRoute = require('./routes/Share.route');
const profilePicRoute = require('./routes/ProfilePic.route');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(cors());
app.use(express.static(path.join(__dirname, 'dist/mean-stack-crud-app')));
app.use('/', express.static(path.join(__dirname, 'dist/mean-stack-crud-app')));
app.use('/api/users', userRoute);
app.use('/api/posts', postRoute);
app.use('/api/likes', likeRoute);
app.use('/api/profilePics', profilePicRoute);
app.use('/api/comments', commentRoute);
app.use('/api/shares', shareRoute);
app.use('/api/gallery', galleryRoute);
// Create port
const port = process.env.PORT || 4000;
const server = app.listen(port, () => {
console.log('Connected to port ' + port)
})
// Find 404 and hand over to error handler
app.use((req, res, next) => {
next(createError(404));
});
// error handler
app.use(function (err, req, res, next) {
console.error(err.message); // Log error message in our server's console
if (!err.statusCode) err.statusCode = 500; // If err has no specified error code, set error code to 'Internal Server Error (500)'
res.status(err.statusCode).send(err.message); // All HTTP requests must have a response, so let's send back an error with its status code and message
});
this is my commentRoute.js
const express = require('express');
const commentRoute = express.Router();
// Comment model
let Comment = require('../models/Comment');
const createError = require('http-errors');
//multer for pic upload
const uploadMedia = require('../middleware/picUpload')
// Add Comment
commentRoute.route('/create').post((req, res, next) => {
// if(req?.files[0]){
// newComment.media = req?.files[0]
// }
let newComment = req.body;
newComment.creationDate = new Date(req.body.creationDate)
console.log(newComment)
Comment.create(newComment, (error, data) => {
// if (error instanceof multer.MulterError ) {
// error.message += "\nmulter Error";
// return next(error)
// }else
if (error){
return next(error)
}
else {
res.json(data);
}
})
//Get comments by parent ID
commentRoute.route('/read/byParentId/:idParent').get( async (req, res, next) => {
await Comment.find({idParent : req.params.idParent}, (error, data) => {
if(error){
return next(error)
}else{
res.json(data)
}
})
})
})
module.exports = commentRoute;
this is my mongoose comment schema
const mongoose = require('mongoose');
const Schema = mongoose.Schema;
// Define collection and schema
let Comment = new Schema({
idUser: {
type : String
},
idParent : {
type : String
},
text : {
type : String
},
media : {
fieldname : { type : String },
originalname : { type : String },
encoding : { type : String },
mimetype : { type : String },
buffer : { type : Buffer },
},
creationDate : {
type : Date
}
},
{
collection: 'comments'
})
module.exports = mongoose.model('Comment', Comment);
this is my client side http get request
baseUrl = 'http://localhost:4000/api/comments';
headers = new HttpHeaders().set('Content-Type', 'application/json');
constructor(private http : HttpClient) { }
getCommentsByParentId(idParent : any){
return this.http.get(`${this.baseUrl}/read/byParentId/${idParent}`);
}
this is how I consume the api in the client side
getComments(){
this.commentService.getCommentsByParentId(this.idPost).subscribe({
next : (res : any) => {
this.comments = res
this.commentsCount = res.length
},
error : (err : any) => {
console.log("error getting comment list for post "+this.idPost)
}
})
}
client side error :
server side error :
thank you.
Edit :
post without the list of comments before I post a new comment
post after I post a new comment

Well, that's very obvious that the server can't find the entity in the DB.
You need to check one of the following:
Maybe when you restart the node server, you restart the db too. that can happen if you're using docker-compose locally. then when you run your node server again your DB starts but there's no data in the DB, therefore the service can't find any data.
After service restart you're using non-existing ID because of wrong UI flow.
I would guess that you're facing the first option.

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client in Node JS

I am trying to update a data using a specific ID which is not working but gives above error.
When I update, first I search the database for that specific id and then save the data to MongoDB
here is my server.js
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
//importing MongoDB model schema
let ToDo = require('./todo.model');
const app = express();
const todoRoutes = express.Router();
const PORT = 4000;
//middlewares
app.use(bodyParser.json());
app.use(cors());
app.use('/todos', todoRoutes);
//connection to the MongoDB database
mongoose.connect('mongodb://127.0.0.1:27017/todos', {useNewUrlParser: true});
const connection = mongoose.connection;
connection.once('open', () =>{
console.log("Connected to the MongoDB through port: 27017");
});
app.listen(PORT, () => {
console.log(`Listening to port: ${PORT}`);
});
//get all data - removed to show only the code snippet I am getting errors
//get data by an ID - removed to show only the code snippet I am getting errors
//add items to database -removed to show only the code snippet I am getting errors
//update items
todoRoutes.route('/update/:id').post((req, res) => {
let id = req.params.id;
ToDo.findById(id, (err, todo) => {
if(err) throw err;
if(!todo) res.status(400).send("No data found");
todo.todo_description = req.body.todo_description;
todo.todo_responsible = req.body.todo_responsible;
todo.todo_priority = req.body.todo_priority;
todo.todo_completed = req.body.todo_completed;
res.end();
todo.save().then(todo => {
res.json(200).send("Data Updated! " + todo);
res.end();
}).catch(err => {
res.status(400).send("Error occured! " + err);
});
});
});
This is the error I am getting...
Can someone please help me?

This error usually means that you send a response more than once.
Notice that you send two responses one after the other res.json() and res.end()
If you want for some reason to just end the response, use res.end(), otherwise use res.status(200).json({ result: ‘Data updated’ + todo })
If you send both, it will complain about trying to modify the response (via res.end()) after sending it (via res.status().json())

In the '/update/:id' route, you're sending a res.end() then doing it again 3 lines later. If you remove the first res.end(), it should work.
You should also return if todo is missing:
todoRoutes.route('/update/:id').post((req, res) => {
let id = req.params.id;
ToDo.findById(id, (err, todo) => {
if(err) throw err;
if(!todo) return res.status(400).send("No data found");
todo.todo_description = req.body.todo_description;
todo.todo_responsible = req.body.todo_responsible;
todo.todo_priority = req.body.todo_priority;
todo.todo_completed = req.body.todo_completed;
todo.save().then(todo => {
res.status(200).send("Data Updated! " + todo);
}).catch(err => {
res.status(400).send("Error occured! " + err);
});
});
});

Big problem with security (JWT NodeJS), one token for all acces

I have a really big problem with security in my web application.
I implemented JWT token when user login to my application (REST API returns token).
In my jwt token, I have only userID. Problem is that, when I would like to login on user with ID = 1,
I can see and execute rest actions from all other users with the same token. for example:
When I looged userId = 1, I doing GET action: /api/users/1 and I have a information about user 1. But I can doing action /api/users/2, 3 etc.
All with one token. how to secure it?
const jwt = require('jsonwebtoken');
const env = require('../config/env.config.js');
module.exports = (req, res, next) => {
try {
const token = req.headers.authorization.split(' ')[1];
const decoded = jwt.verify(token, env.SECRET_KEY);
req.userData = decoded;
next();
} catch (error) {
return res.status(401).json({
message: 'Auth failed',
});
}
};

I think the best solution would be to create middleware that check the id of the sender and attach it to routes, similar to bellow
const middleware = (req, res, next) => {
const id = req.params.id || req.body.id || req.query.id
if (req.userData.id === id) {
next()
} else {
res.status(403).send({message: "forbidden"})
}
}
router.get("/api/users/:id", middleware, (req, res) => {
// do your staff
res.send({message: "ok"})
})
router.put("/api/users/:id", middleware, (req, res) => {
// do your staff
res.send({message: "ok"})
})

Axios data is breaking the request

I have an express API and a ReactJs front-end. I try to make a POST call from my front-end directly to the local API.
For this I'm using axios.
The request is working fine when I set the parameters directly inside the query string but is always getting on timeout if I try to add the parameters through the data attribute of the axios.post() method.
Working
axios.post(`http://localhost:5001/site/authenticate?username=demo&password=demo`)
Not working
const payload = {
"username":"mh",
"password":"mh"
}
axios.post(`http://localhost:5001/site/authenticate`, payload)
My express server:
const express = require('express');
const bodyParser = require('body-parser');
const morgan = require('morgan');
const jwt = require('jsonwebtoken'); // used to create, sign, and verify tokens
var cors = require('cors');
const app = express();
const port = process.env.API_PORT || 5001;
app.use(cors());
app.set('secret', process.env.API_SECRET);
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(morgan('dev'));
app.use((req, res, next) => {
let data = '';
req.setEncoding('utf8');
req.on('data', (chunk) => {
data += chunk;
});
req.on('end', () => {
req.rawBody = data;
next();
});
});
// Allow CORS
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// SITE ROUTES -------------------
const siteRoutes = express.Router();
siteRoutes.post('/authenticate', function(req, res) {
console.log('auth');
getDocument(usersBucket, req.query.username)
.then((doc) => {
console.log("Authentification... TODO");
// return the information including token as JSON
res.json({
success: true,
status: 200,
token: token
});
})
.catch(() => {
res.status(401).json({ success: false, message: 'Authentification failed. User not found.' });
});
});
// route middleware to verify a token
siteRoutes.use(function(req, res, next) {
const token = req.body.token || req.query.token || req.headers['x-access-token'];
if (token) {
// verifies secret and checks exp
jwt.verify(token, app.get('secret'), function(err, decoded) {
if (err) {
return res.json({ success: false, message: 'Failed to authenticate token.', status: 401 });
} else {
req.decoded = decoded;
next();
}
});
} else {
return res.status(403).send({
success: false,
message: 'No token provided.'
});
}
});
siteRoutes.get('/', function(req, res) {
res.json({ message: 'Welcome!' });
});
app.use('/site', siteRoutes);
app.listen(port, () => {
logger.log(`Express server listening on port ${port}`);
});
Any idea? Thanks.
Update
I replaced my route just to see if I got in or not (without worrying about parameters):
siteRoutes.post('/authenticate', function(req, res) {
console.log("go in");
res.json({
success: true,
status: 200,
});
});
But my console.log is not showing hen I use the payload (it is when I do not).

You should access the payload data via request.body, not the request.query:
// SITE ROUTES -------------------
const siteRoutes = express.Router();
siteRoutes.post('/authenticate', function(req, res) {
console.log('auth');
getDocument(usersBucket, req.body.username) // <------- HERE
.then((doc) => {
console.log("Authentification... TODO");
// return the information including token as JSON
res.json({
success: true,
status: 200,
token: token
});
})
.catch(() => {
res.status(401).json({ success: false, message: 'Authentification failed. User not found.' });
});
});
request.query are the parameters passed in the URL, like:
protocol://hostname:port/path/to.route?query_param_0=value_0&query_param_1=value_1
on your express endpoint request.query will be:
{
query_param_0: value_0,
query_param_1: value_1
}
while sending the payload, with the second argument in axios.post(url, payload):
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
on your express endpoint request.body will be:
{
firstName: 'Fred',
lastName: 'Flintstone'
}
when you use app.use(bodyParser.json()); (and you do).

You are using “getDocument(usersBucket, req.query.username)”
This means you express route is expecting username as a request param. That’s why it’s working when you use “?username=xx”
Instead try to get it from json body of request.
“req.body.username”
Also you should consider validating the request body or param as required.

Simple Node.JS REST API call

I have a simple app that requires a REST API call to perform CRUD (Create,Read,Update,Delete). However, i can't seem to get the REST API working.
When it's executing the put operation, i'm getting
"api.js:81 Uncaught (in promise) SyntaxError: Unexpected end of JSON input
at callAPI (api.js:81)"
I'm using Api.js to check the API calls.
api-photos.js
//photos.js
var express = require('express');
var router = express.Router();
var multer = require('multer');
var photoController = require('../../controllers/photoController');
var upload = multer({
storage: photoController.storage,
fileFilter: photoController.imageFilter
});
//import PhotoService
const PhotoService = photoController.PhotoService;
router.use((req, res, next)=>{
//set mime type for all request and origin
res.set({
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,OPTIONS',
"Access-Control-Allow-Headers":"Content-Type, Access-Control-Allow-Headers",
'Content-type':'applicaion/json'
});
if(req.method == 'OPTIONS'){
return res.status(200).end();
}
next();
})
// photos - list
router.get('/', (req, res, next)=>{
PhotoService.list()
//returns promise - argument passed photos
.then((photos)=>{
console.log(`API: Found images: ${photos}`);
res.status(200);
//set content type header to application/json - set correct mime type
res.send(JSON.stringify(photos));
});
})
// photos/:photoid - find
router.get('/:photoid', (req, res, next)=>{
PhotoService.read(req.params.photoid)
//returns promise - argument passed photos
.then((photo)=>{
console.log(`API: Found images: ${photo}`);
res.status(200);
//set content type header to application/json - set correct mime type
res.send(JSON.stringify(photo));
}).catch((err)=>{
});
});
// /photos POST create
router.post('/', upload.single('image'), async (req, res, next)=>{
var path = "/static/img/" + req.file.filename;
var photo = {
originalname: req.file.originalname,
mimetype: req.file.mimetype,
imageurl: path,
title: req.body.title,
filename: req.file.filename,
description: req.body.description,
size: req.file.size / 1024 | 0
}
//calling on photo service to return json object
try{
const photoSave = await PhotoService.create(photo);
res.status(201);
res.send(JSON.stringify(photoSave));
}catch(err){
console.log(err);
throw new Error("PhotoSaveError", photo);
}
});
// /photos/photoid: PUT - update
router.put('/:photoid', (req, res, next)=>{
console.log(`putting ${req.params.photoid}`);
let putdata = req.body;
PhotoService.update(req.params.photoid, putdata)
console.log()
.then((updatePhoto)=>{
res.status(200);
res.send(JSON.stringify(updatedPhoto));
}).catch((err)=> {
res.status(404);
res.end();
});
});
// /photos/photoid: DELETE - delete
router.delete('/:photoid', (req, res, next)=>{
PhotoService.delete(req.params.photoid)
.then((photo) => {
console.log(`Found images: $(photo)`);
res.status(200);
res.send(JSON.stringify(photo));
}).catch((err)=> {
res.status(404);
res.end();
});;
});
module.exports = router;
photo.js
//photos.js
var express = require('express');
var router = express.Router();
var app = express();
var multer = require('multer');
var photoController = require('../controllers/photoController');
var flash = require('express-flash');
//create upload object- intialize
var upload = multer({
storage: photoController.storage,
fileFilter: photoController.imageFilter
});
//Photo model import is required
var Photo = require('../models/photoModel');
const PhotoService = photoController.PhotoService
//flash messaging
router.use(flash());
//LIST - Get request to search database for our photos
router.get('/', (req, res, next)=>{
//search the DB for the photos
PhotoService.list()
.then((photos)=>{
//call photos view
res.render('photos', {
photos : photos,
flashMsg: req.flash("fileUploadError")
});
})
.catch((err)=>{
if (err) {
res.end("ERROR!");
}
});
});
//FIND - route for getting photo Details with form for editing
router.get('/:photoid', (req, res, next)=>{
console.log("finding "+req.params.photoid);
PhotoService.read({'_id': req.params.photoid})
//return promoise then handle it to render photo
.then((photo)=>{
res.render('updatePhoto', {
photo: photo,
flashMsg: req.flash("photoFindError")
});
}).catch((err)=>{
if (err) console.log(err);
});
});
//DELETE - route for deleting the photos
router.delete('/delete/:photoid', function(req, res){
PhotoService.delete({'_id': req.params.photoid})
.then((photos) => {
res.redirect('/photos');
});
});
//UPDATE - route for posting newly updated details
router.post('/:photoid', (req, res, next)=>{
PhotoService.update({'_id': req.params.photoid})
//return promoise then set photo data details
.then((photo)=>{
var data = {
title: req.body.title,
description: req.body.description
}
//set the data, save the photo details and redirect to photo list
photo.set(data);
photo.save().then(()=>{
res.redirect('/photos');
});
})
.catch((err)=>{
if (err) console.log(err);
});
});
//CREATE - post fields to the server and save them
router.post('/', upload.single('image'), (req, res, next)=>{
var path = "/static/img/" + req.file.filename;
var photo = {
originalname: req.file.originalname,
mimetype: req.file.mimetype,
imageurl: path,
title: req.body.title,
filename: req.file.filename,
description: req.body.description,
size: req.file.size / 1024 | 0
}
//Saving photo to DB
var photo = new Photo(photo);
photo.save()
.then(()=>{
//redirect after save, if succesfull
res.redirect('/photos');
})
//Catch error logs error
.catch((err)=>{
if (err){
console.log(err);
throw new Error("PhotoSaveError", photo);
}
});
});
//function will get called if above gets unhandled error - flash to display image and redirect
router.use(function(err, req, res, next){
console.error(err.stack);
if (err.message == "OnlyImageFilesAllowed"){
req.flash('fileUploadError', "Please select an image file with jpg, png, or gif")
res.redirect('/photos');
//2nd condition error if there was a problem saving
} else if (err.message == "PhotoSaveError"){
req.flash('photoSaveError', "There was a problem saving the photo")
res.redirect('/photos');
} else{
next(err);
}
});
//export the module
module.exports = router;
api.js
// wrap in IIFE to control scope
(function(){
const baseURL = 'http://localhost:8080';
function testAPIs(){
// test list first
var testId = '';
var testJSON = {};
// list
callAPI('GET', '/api/photos', null, null)
.then((list)=>{
console.log('\n\n***************************\nlist results:');
console.log(list);
testId = list[0]._id;
// create
let input = document.querySelector('input[type="file"]')
let data = new FormData()
data.append('image', input.files[0]);
data.append('title', 'My API Test Title');
data.append('description','This is an AJAX API test');
callAPI('POST', '/api/photos', null, data)
.then((photo)=>{
photoId = photo._id;
savedPhoto = photo; // keep a handle to the created photo object
console.log('\n\n***************************\ncreate results:');
console.log(photo);
// find
callAPI('GET','/api/photos/'+photoId, null, null)
.then((photo)=>{
console.log('\n\n***************************\nfind results:');
console.log(photo);
// update
testJSON.description += ' appended by the AJAX API ';
callAPI('PUT','/api/photos/'+photoId, null, savedPhoto)
.then((photo)=>{
console.log('\n\n***************************\nupdate results:');
console.log(photo);
//delete
callAPI('DELETE', '/api/photos/'+photoId, null, null)
.then((result)=>{
console.log('\n\n***************************\ndelete result:');
console.log(result);
})
});
});
});
})
.catch((err)=>{
console.error(err);
});
}
async function callAPI(method, uri, params, body){
jsonMimeType = {
'Content-type':'application/json'
}
try{
/* Set up our fetch.
* 'body' to be included only when method is POST
* If 'PUT', we need to be sure the mimetype is set to json
* (so bodyparser.json() will deal with it) and the body
* will need to be stringified.
* '...' syntax is the ES6 spread operator.
* It assigns new properties to an object, and in this case
* lets us use a conditional to create, or not create, a property
* on the object. (an empty 'body' property will cause an error
* on a GET request!)
*/
var response = await fetch(baseURL + uri, {
method: method, // GET, POST, PUT, DELETE, etc.
...(method=='POST' ? {body: body} : {}),
...(method=='PUT' ? {headers: jsonMimeType, body:JSON.stringify(body)} : {})
});
return response.json(); // parses response to JSON
}catch(err){
console.error(err);
return "{'status':'error'}";
}
}
// Calls our test function when we click the button
// afer validating that there's a file selected.
document.querySelector('#testme').addEventListener("click", ()=>{
let input = document.querySelector('input[type="file"]')
if (input.value){
testAPIs();
}else{
alert("please select an image file first");
}
});
})();

Here is an update PUT handler which should stop throwing "undefined .then of ...", note that updatePhoto needed to be renamed to updatedPhoto as well.
router.put('/:photoid', (req, res, next) => {
console.log(`putting ${req.params.photoid}`);
let putdata = req.body;
PhotoService.update(req.params.photoid, putdata).then((updatedPhoto) => {
res.status(200);
res.send(JSON.stringify(updatedPhoto));
}).catch((err) => {
res.status(404);
res.end();
});
});
And if you are using node 8+ you can use async/await. It simplifies the code and makes the problems easier to see:
router.put('/:photoid', async (req, res, next) => {
try {
console.log(`putting ${req.params.photoid}`);
let putdata = req.body;
const updatedPhoto = await PhotoService.update(req.params.photoid, putdata);
res.status(200);
res.send(JSON.stringify(updatedPhoto));
} catch (e) {
res.status(404);
res.end();
}
});