提交两次相同的请求时出现 HTTP 标头错误



嗨,我正在使用NodeJS,ExpressJS和MySQLJs做一个非常简单的API。我有一个小表单,可以向服务器发出请求login请求。我遇到的问题是,当我在第一次请求完成后尝试执行两次相同的请求时,服务器会回答我ERR_CONNECTION_REFUSED

我使用本教程是为了让我的代码更干净一点。我做了一些改变,因为我认为类使代码比使用functions更干净。

https://code.tutsplus.com/tutorials/managing-the-asynchronous-nature-of-nodejs--net-36183

这是我有的错误的完整回溯

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at ServerResponse.setHeader (_http_outgoing.js:470:11)
at User.<anonymous> (/home/ismael/Projects/internal_project/app.js:84:9)
at User.emit (events.js:187:15)
at Query.<anonymous> (/home/ismael/Projects/internal_project/model/user.js:20:14)
at Query.<anonymous> (/home/ismael/Projects/internal_project/node_modules/mysql/lib/Connection.js:502:10)
at Query._callback (/home/ismael/Projects/internal_project/node_modules/mysql/lib/Connection.js:468:16)
at Query.Sequence.end (/home/ismael/Projects/internal_project/node_modules/mysql/lib/protocol/sequences/Sequence.js:83:24)
at Query._handleFinalResultPacket (/home/ismael/Projects/internal_project/node_modules/mysql/lib/protocol/sequences/Query.js:139:8)
at Query.EofPacket (/home/ismael/Projects/internal_project/node_modules/mysql/lib/protocol/sequences/Query.js:123:8)
at Protocol._parsePacket (/home/ismael/Projects/internal_project/node_modules/mysql/lib/protocol/Protocol.js:278:23)

这是我的主要 JavaScript,我在其中定义了简单应用程序的主要结构。在日志中我可以看到第二个请求是在成功回调中输入的,我错过了什么?

app.post( '/login/', function(req, res){
user.on('success', function(result){
logger.debug( '[SUCCESS]' );
res.cookie('user', { name : result.name, id : result.id  });
res.setHeader( 'Content-Type', 'application/json' );
res.status(200).end( JSON.stringify({success : true}) );
});
user.on('failure', function(reason){
logger.debug( '[FAILURE]' );
res.setHeader( 'Content-Type', 'application/json' );
res.status(400).send( JSON.stringify({success: false}) );
});
user.on('error', function(error){
// logger.debug( '[ERROR]' );
//
// res.setHeader( 'Content-Type', 'application/json' );
// res.status(500).send( JSON.stringify({ error: 'Internal error' }) );
});
user.login( req.body.username, req.body.password );
});

这是用户类的登录方法

login ( username, password ){
var that = this;
this.sql.query( "SELECT * FROM user WHERE name = ? AND password = ?", [ username, password ], function(error, result, fields){
// if ( error ){
//   that.emit('error', error);
//   return true;
// }
if ( result.length == 0 ){
that.emit( 'failure' );
return true;
}
if ( result.length >= 1 ){
that.emit( 'success', result[0] );
return true;
}
});
}

我在前面使用这个 Javascript 从登录表单中获取所有值并将其发送到 API。

主.js

(function(){
var _loginForm = {},
_loginUsername = {},
_loginPassword = {},
_loginConfig = {
url : '/login/',
method : 'POST'
},
_loginRequest = new XMLHttpRequest();
var
_onLoginRequest = function(){
console.log( this );
if ( this.readyState == 4 ){
JSON.parse(this.responseText)
}
},
_onLoginSubmit = function(evt){
evt.preventDefault();
_loginRequest.onreadystatechange = _onLoginRequest;
_loginRequest.open( _loginConfig.method, _loginConfig.url, true );
_loginRequest.setRequestHeader( 'Content-Type', 'application/json' );
_loginRequest.send(JSON.stringify({
username : _loginUsername.value,
password : _loginPassword. value
}));
},
_onDomLoad = function(evt){
_loginForm = document.getElementById( 'login-form' );
_loginUsername = document.getElementById( 'username' );
_loginPassword = document.getElementById( 'password' );
_loginForm.addEventListener( 'submit', _onLoginSubmit );
};
document.addEventListener( 'DOMContentLoaded', _onDomLoad );
})();

提前谢谢。

您正在为每个请求注册事件处理程序。问题是,之后您不会删除任何请求处理程序。

例如,如果您向登录端点发出了 10 个 POST 请求,然后执行了第 11 个请求。如果第 11 个成功,则会为当前请求触发success事件,也会为所有其他 10 个请求触发。

您获得Cannot set headers after they are sent to the client的原因是,正在为已完成的 HTTP 请求触发事件侦听器。

解决方案是构建这种不同的结构。事件侦听器不是调用函数和获取结果的好模型。事件侦听器适用于可以多次触发的事情。在这种情况下,您不希望这样,您只需要每个请求 1 次成功或 1 次失败。

正确的模型是:

A( 一个简单的函数调用。它可以返回与其成功相关的信息,并在失败时引发异常。

B( 回报承诺。如果登录成功,则解决它们,如果不成功,则拒绝它们。

C( 使用 async/await。再次:如果成功,则返回result,如果不成功,则抛出错误。

D( 使用你已经在 express 中使用的回调模式。因此,使用errresult参数传递回调。

最后一个选项可能更可取,因为您正在使用不支持 Promise 和 async/await 的框架。

在 API 调用中创建用户对象app.post而不是全局创建它。

最新更新