My express server returns 404 error when i try to send request from html form. However get request works fine. I have separated files for server and routes. I can't make requests in app.js, because there are too many of them (for different pages). I want to make post-insert request to db, but i just can't get any information from my form.

Is there something i missing?

my html form (ejs precisely)

<form action="/add" method="POST">
     <input type="text" name="title" placeholder="Event name" />
     <input type="text" name="subcategory" placeholder="Category" />
     <input type="text" name="date" placeholder="Date" />
     <input type="text" name="place" placeholder="Place" />
     <input type="text" name="organisator" placeholder="Organisator" />
     <textarea name="description" placeholder="Description" onkeyup="adjust_textarea(this)"></textarea>
     <input type="submit" value="Add" />
 </form>

my App.js file (error on 404 handler)

const express = require('express');
const path = require('path');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');

var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

//db connection
var mysql = require("mysql");
app.use(function(req, res, next){
    res.locals.connection = mysql.createConnection({
        host     : 'localhost',
        user     : 'root',
        password : 'mypassword',
        database : 'mydb'
    });
    res.locals.connection.connect();
    next();
});

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', require('./routes/index'));
app.use('/events', require('./routes/events'));

//handling errors
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  res.status(err.status || 500);
  res.render('error');
});

//server init
var http = require('http');

var server = http.createServer(app);
server.listen(4000);
if(server.listening){
  console.log('Server is listening on port 4000');
}

module.exports = app;

my ./routes/events.js file

const express = require('express');
const router = express.Router();

router.get('/', function (req, res, next) {
    let query = '*select query*';
    res.locals.connection.query(query, function (error, results, fields) {
        if (error) throw error;
        res.render('index', { title: 'Events', data: results });
    });
});

router.post('/add', function (req, res) {
    var obj = req.body.title;

    console.log(obj);
    res.redirect('/events');
});

What i see in browser

My express server returns 404 error when i try to send request from html form. However get request works fine. I have separated files for server and routes. I can't make requests in app.js, because there are too many of them (for different pages). I want to make post-insert request to db, but i just can't get any information from my form.

Is there something i missing?

my html form (ejs precisely)

<form action="/add" method="POST">
     <input type="text" name="title" placeholder="Event name" />
     <input type="text" name="subcategory" placeholder="Category" />
     <input type="text" name="date" placeholder="Date" />
     <input type="text" name="place" placeholder="Place" />
     <input type="text" name="organisator" placeholder="Organisator" />
     <textarea name="description" placeholder="Description" onkeyup="adjust_textarea(this)"></textarea>
     <input type="submit" value="Add" />
 </form>

my App.js file (error on 404 handler)

const express = require('express');
const path = require('path');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');

var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

//db connection
var mysql = require("mysql");
app.use(function(req, res, next){
    res.locals.connection = mysql.createConnection({
        host     : 'localhost',
        user     : 'root',
        password : 'mypassword',
        database : 'mydb'
    });
    res.locals.connection.connect();
    next();
});

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', require('./routes/index'));
app.use('/events', require('./routes/events'));

//handling errors
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  res.status(err.status || 500);
  res.render('error');
});

//server init
var http = require('http');

var server = http.createServer(app);
server.listen(4000);
if(server.listening){
  console.log('Server is listening on port 4000');
}

module.exports = app;

my ./routes/events.js file

const express = require('express');
const router = express.Router();

router.get('/', function (req, res, next) {
    let query = '*select query*';
    res.locals.connection.query(query, function (error, results, fields) {
        if (error) throw error;
        res.render('index', { title: 'Events', data: results });
    });
});

router.post('/add', function (req, res) {
    var obj = req.body.title;

    console.log(obj);
    res.redirect('/events');
});

What i see in browser

• javascript
• node.js
• express
• post
• http-status-code-404

1 Answer 1

You have the 'add' endpoint listed in in your 'routes/events.js' file, which causes the structure of the final route to be '/events/add.' In your form, you are sending to the '/add' endpoint so to fix the issue, either change the action prop on the form to '/events/add' or move the '/add' endpoint into it's own route like this:

router.post('/add', function(req, res) {
    var obj = req.body.title;

    console.log(obj);
    res.redirect('/events');
});