I'm trying to collect data from a webpage (registration form that collects user info) running on local host but when I press the submit button, I get a
404 Error: page not found and the data from the form isn't being collected and outputted.
I'm using webstorm with node.js and express and I wanted the user input from the registration page to be collected and parsed using body-parser. A lot of this code was already in the premade Nodejs Express App project.
This is my app.js file:
var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var registration = require('./routes/registration');
var app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: true });
module.exports = app;
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/registration', registration);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
app.get('/', function(req, res) {
res.render('index');
});
app.get('/registration', function(req, res) {
res.render('registration', {qs: req.query});
});
app.post('/registration', urlencodedParser, function(req, res) {
console.log(req.body);
res.render('registration', {qs: req.query});
});
I'm able to see the form on the webpage while the server is running and I can input information but when I hit the submit button, it goes to the 404 error: page not found and the information isn't printed to my console log.
I'm not sure what the problem is because before I added the app.get lines, I was able to input information and submit the form (though it didn't do anything - just refreshed to a new blank form).
I followed this tutorial: ;t=137s
This is a portion of the html file:
<form id="registration-info" method="POST" action="/registration">
<div class="container">
<div class="py-5 text-center”>
<h2>Registration Form</h2>
<div class="row justify-content-center">
<div class="col-md-8 order-md-1">
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="birthmonth">Birthday</label>
<select class="custom-select d-block w-100" required>
<option value="">Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<div class="invalid-feedback">
Please select a valid month.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="birthday">Day</label>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Day is required.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="birthyear">Year</label>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Year is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="password">Password</label>
<input type="password" class="form-control" >
<div class="invalid-feedback">
Please enter a password.
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
</div>
</div>
</div>
I'm trying to collect data from a webpage (registration form that collects user info) running on local host but when I press the submit button, I get a
404 Error: page not found and the data from the form isn't being collected and outputted.
I'm using webstorm with node.js and express and I wanted the user input from the registration page to be collected and parsed using body-parser. A lot of this code was already in the premade Nodejs Express App project.
This is my app.js file:
var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var registration = require('./routes/registration');
var app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: true });
module.exports = app;
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/registration', registration);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
app.get('/', function(req, res) {
res.render('index');
});
app.get('/registration', function(req, res) {
res.render('registration', {qs: req.query});
});
app.post('/registration', urlencodedParser, function(req, res) {
console.log(req.body);
res.render('registration', {qs: req.query});
});
I'm able to see the form on the webpage while the server is running and I can input information but when I hit the submit button, it goes to the 404 error: page not found and the information isn't printed to my console log.
I'm not sure what the problem is because before I added the app.get lines, I was able to input information and submit the form (though it didn't do anything - just refreshed to a new blank form).
I followed this tutorial: https://www.youtube./watch?v=rin7gb9kdpk&t=137s
This is a portion of the html file:
<form id="registration-info" method="POST" action="/registration">
<div class="container">
<div class="py-5 text-center”>
<h2>Registration Form</h2>
<div class="row justify-content-center">
<div class="col-md-8 order-md-1">
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName">First name</label>
<input type="text" class="form-control" value="" required>
<div class="invalid-feedback">
Valid first name is required.
</div>
</div>
<div class="col-md-6 mb-3">
<label for="lastName">Last name</label>
<input type="text" class="form-control" value="" required>
<div class="invalid-feedback">
Valid last name is required.
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="birthmonth">Birthday</label>
<select class="custom-select d-block w-100" required>
<option value="">Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<div class="invalid-feedback">
Please select a valid month.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="birthday">Day</label>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Day is required.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="birthyear">Year</label>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Year is required.
</div>
</div>
</div>
<div class="mb-3">
<label for="password">Password</label>
<input type="password" class="form-control" >
<div class="invalid-feedback">
Please enter a password.
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
</div>
</div>
</div>
-
Have you tried adding the error handlers after
app.post('/registration')? – CodeLover Commented Feb 17, 2018 at 5:21
2 Answers
Reset to default 3You are handling errors before checking the routes. so it always going to 404 error
var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
// var index = require('./routes/index');
// var registration = require('./routes/registration');
var app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: true });
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// app.use('/', index);
// app.use('/registration', registration);
app.get('/', function(req, res) {
res.render('index');
});
app.get('/registration', function(req, res) {
res.render('registration', {qs: req.query});
});
app.post('/registration', urlencodedParser, function(req, res) {
console.log(req.body);
res.render('registration', {qs: req.query});
});
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
In addition to Nitin Goyal's answer, the order of express middleware is important. Because in your app you defined the error middleware (error middleware always has four arguments err, res, req ,next) before the other middleware.
When an error occurs in express (when next is called with an argument usually new Error) express it looks for the next error middleware. You then can exit this error middleware by calling next() without an argument. Now express looks for the next normal (with 2-3 args) middleware and skips all the error middleware (with 4 args).
This post explains it nicely.