Express Server seems to give 200 then gives 404 on post request

Question

I am teaching myself NodeJS to create an application, and I'm running into a problem with Express where the server seems to return a 200 code on a post request, but then immediately becomes a 404 for some reason.

The request was properly handled before I added a jquery method in between the client and server to do some front-end verification first. Before, I simply just
included "action='/login'" as an attribute for the form tag and it worked.

I am using the express generator

Here's how the form info looks like (in Jade):

form(name="logins" id="loginfo" role="form" method="post")

It is handled by this function in welcome-screen.js, located in a static directory which I've specified in app.js

$(document).ready(function() {
    $("#loginfo").submit(function(event, done) {
        checkEmail();
    });
});

function checkEmail() {
    var email = document.forms["logins"]["usrname"].value;
    console.log(email);
    if (email.length != 0) {
        getLogin(email);
    }
}

function getLogin(email) {
    $.post("/login", {"usrname" : email});
}

Here's the server code which handles the post request on "/login". The console shows the print statements, so I know that the request is making it to the server and that "/login" can be found.

var express = require('express');
var router = express.Router();
....
router.post("/login", function(req, res) {
    console.log(req.body["usrname"]);
    var user = req.body["usrname"];
    res.render("login", {title : "Hello!",
                    username : user});
    console.log("Passed rendering");
});

However, I am redirected to the default error page giving me a 404 error.

Here is the stack trace I got, if it helps anyone.

Error: Not Found
    at D:\projects\neg5\app.js:30:13
    at Layer.handle [as handle_request]      (D:\projects\neg5\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (D:\projects\neg5\node_modules\express\lib\router\index.js:312:13)
at D:\projects\neg5\node_modules\express\lib\router\index.js:280:7
at Function.process_params (D:\projects\neg5\node_modules\express\lib\router\index.js:330:12)
at next (D:\projects\neg5\node_modules\express\lib\router\index.js:271:10)
at D:\projects\neg5\node_modules\express\lib\router\index.js:618:15
at next (D:\projects\neg5\node_modules\express\lib\router\index.js:256:14)
at Function.handle (D:\projects\neg5\node_modules\express\lib\router\index.js:176:3)
at router (D:\projects\neg5\node_modules\express\lib\router\index.js:46:12)

After I send the post request, the console prints these two lines included in the express generator, so I know that "/login" is being found.

POST /login 200 34.463 ms - 598
POST / 404 25.479 ms - 1398

I've been pulling out my hair trying to figure out why this isn't working. Any help would be greatly appreciated!

Answer 1

You need to add action="/login" to your login form (in views/index.jade ), like so:

form(name="logins" id="loginfo" action="/login" role="form" method="post")
    // rest of view omitted 

Answer 2

POST /login 200 34.463 ms - 598
POST / 404 25.479 ms - 1398

this tells two requests had been sent, one is /login, another is /.

   POST /login 200 is trigger by code $.post()
   POST/ 404  is triggered by code $.submit()