Node.js和Express无法使用简单的Bootstrap表单发布/出错

Question

I am getting a "Cannot post /" error in my client browser when I try to login/authenticate an user and navigate to the user page. This used to work perfectly alright before I started using Bootstrap (ie, it was simple container without the class and other style elements in the form).

Interestingly enough it works fine sometimes when I try to step through using the WebKit debugger in the browser (including the client and also the server side code). But doesn't work when I try to login normally without the breakpoint in the debugger.

I have the following simple form in my html file created using Bootstrap:

<div id="navbar" class="navbar-collapse collapse">
  <form class="navbar-form navbar-right" enctype="multipart/form-data" method="post" id="loginForm">
    <div class="form-group">
      <input type="text" placeholder="Email" class="form-control" id="userId" name="userId"/>
    </div>
    <div class="form-group">
      <input type="password" placeholder="Password" class="form-control" id="password" name="password"/>
    </div>
    <button class="btn btn-success" onclick="validateLoginForm()"/>Sign in</button>
    <div>
      <input type="checkbox" id="keeplogged" name="keeplogged" checked="checked"/>
      <label for="keeplogged"> Keep me logged in </label>
    </div>
 </form>
</div>

The Javascript code for that is:

function validateLoginForm() {
   var ret = validateLoginData();
   if(ret) {
      loginUser("loginForm");
   }

   return ret;
}

function loginUser(formId) {
   var xhr = new XMLHttpRequest();
   xhr.withCredentials = true;
   xhr.onreadystatechange = function() {
      if(xhr.readyState == 4) {
         if(xhr.status == 200) {
            //navigate to the home page
            window.location = "/home.html";
         }
         else {
            console.log("Login problem with the client request.");
         }
      }
   };

   //Send form to server in background
   xhr.open("POST", "/login");
   xhr.send(new FormData(document.getElementById(formId)));
}

The server route for /login looks like this:

   app.post("/login", function(req, res) {
      accountMgr.authenticateUser(req, res, function(err, user){
         if(user) {
            util.log("User <" + user.email + "> logged in successfully!");

            // Regenerate session when signing in to prevent fixation
            req.session.regenerate(function(){
               // Store the user's primary key in the session store to be retrieved,
               // or in this case the entire user object
               req.session.user = user;
               req.session.success = 'Authenticated as ' + user.name;
               if(req.body["keeplogged"] == "on"){
                  res.cookie('user', user.email, { maxAge: 3600000000 });
                  res.cookie('pass', req.body["password"], { maxAge: 3600000000 });
               }
               res.send('success', 200);
            });
         }
         else {
            util.log("User <" + req.body["userId"] + "> failed to login with error: " + err);
            req.session.error = 'Authentication failed, please check your '
                                      + ' username and password.';
            res.send(404);
         }
      });
   });

exports.createAccountManager = function(db, settings) {
   //Authenticate the user credentials
   this.authenticateUser = function (req, res, cb) {
      var userId = req.body["userId"],
          passwd = req.body["password"];

      util.log("Received authenticate request for user: " + userId);

      //first check if the user with the given id exists or not
      db.users.findOne({email: userId}, function(err, user) {
        //now check if the password entered by the user matches with our DB record
        //note: new users will not have the salt value too!
        if(user != null && user.salt != null) {
           if(user.active) {
              hash(passwd, user.salt, function(err, hashKey){
                 if (err) return cb(err);
                 if (hashKey == user.hashKey) return cb(null, user);
                 cb(new Error('Invalid password'));
              });
           }
           else {
              util.log("User with id: " + userId + " is not confirmed!");
              cb(new Error('User account not confirmed'));
           }
        }
        else {
           util.log("Cannot find user with id: " + userId);
           cb(new Error('Invalid user id'));
        }
      });
   };
};

Any ideas on why I am getting this error? and how to fix it?

Edit: Here is the old form (without Bootstrap) which works perfectly:

 <div id="loginContainer">
     <form enctype="multipart/form-data" method="post" id="loginForm">
    <div id="loginHeader">
        <h2>Log In</h2>
    </div>

    <br>
    <div id="loginContent">
                <div>
                    Email <input type="email" id="userId" name="userId" class="dlgText" value="" autocomplete="on" />
                </div>
                <br>
                <div>
                    Password <input type="password" id="password" name="password" class="dlgText" value="" autocomplete="on" />
                </div>
                <br>
                <div>
                    <input type="checkbox" id="keeplogged" name="keeplogged" checked="checked"/>
                    <label for="keeplogged"> Keep me logged in </label>
                </div>
    </div>

            <br>
    <div id="loginFooter">
                <div>
        <input type="button" id="ok" name="ok" class="dlgButton" value="Log In" onclick="validateLoginForm()"/>
        <input type="button" id="cancel" name="cancel" class="dlgButton" value="Cancel" onclick="cancelLoginUI()"/>
                </div>

        <div align=right><a href="javascript:forgotPassword()">Forgot Password?</a></div>
    </div>
    <div class="clear"></div>
     </form>
 </div>

Answer 1

First of all, is the Node.js app hosted on the same server that's making the request - you might find issues with Cross-Origin requests if they're not.

Also are you export ing the app object inside the server file? It looks like you've got an exports.createAccountManager function. Because I guess you're not in the context of your main app.js file where Express is initialised you might need to pass the definition back to the calling module.

I'm interested that you say it sometimes works. When you say works, do you mean it works exactly as you expected or no error is returned?