Node.js & Express 不能用简单的 Bootstrap 表单发布/错误
Node.js & express cannot post / error with a simple Bootstrap form
当我尝试登录/验证用户并导航到用户页面时,我的客户端浏览器中收到"无法发布/"错误。在我开始使用 Bootstrap 之前,这曾经工作得很好(即,它是简单的容器,表单中没有类和其他样式元素)。
有趣的是,当我尝试在浏览器中使用 WebKit 调试器(包括客户端和服务器端代码)时,它有时工作正常。但是当我尝试在调试器中没有断点的情况下正常登录时不起作用。
我在使用 Bootstrap 创建的 html 文件中有以下简单形式:
<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>
Javascript代码是:
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)));
}
/login 的服务器路由如下所示:
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'));
}
});
};
};
关于为什么我收到此错误的任何想法? 以及如何解决它?
编辑:这是旧形式(没有引导),可以完美运行:
<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>
首先
,Node.js 应用程序托管在发出请求的同一服务器上 - 如果不是,您可能会发现跨域请求存在问题。
另外,您是否export
服务器文件中的应用程序对象?看起来你有一个exports.createAccountManager
功能。因为我想你不在初始化 Express 的主app.js
文件的上下文中,所以你可能需要将定义传递回调用模块。
我很感兴趣你说它有时有效。当您说有效时,您的意思是它完全按预期工作还是没有返回错误?
相关文章:
- Node.js & Express 不能用简单的 Bootstrap 表单发布/错误
- 点击Bootstrap Typeahead发送表单
- 使用Bootstrap和AngularJS进行表单验证
- 使用PHP、jQuery和AJAX的Bootstrap联系表单
- 获取表单值并在提交时将其传递给Bootstrap模态
- 将按钮组与表单结合起来-Bootstrap 3
- 使用 jquery ajax 从 Bootstrap 3 模态表单获取数据
- React-Bootstrap 模态表单条目
- 如何使用jQuery Validate正确验证放置在多个选项卡上的Twitter的Bootstrap表单
- 尝试在 Bootstrap 中将两个表单并排放置.任何想法如何
- Bootstrap Modals,在表单验证中结合Jquery和JS代码
- 如何使用Bootstrap Validator提交表单
- 如何清理(销毁)Twitter Bootstrap 3.2模式表单内容
- AngularJS ng-messages甚至在Bootstrap表单上触及表单之前显示错误
- Twitter Bootstrap 2模式表单对话框
- 表单未使用BootStrap验证所需字段
- 使用JavaScript和Bootstrap分段按钮更改表单操作和下拉菜单上的输入值
- 如何在 Twitter Bootstrap 的表单操作中取消 btn-primary 的表单提交
- Bootstrap表单帮助程序未选择完整的国家/地区名称
- Bootstrap模式验证web表单+只显示一个