POST http://localhost:3000/signin 400(错误请求)在反应中
POST http://localhost:3000/signin 400 (Bad Request) in react
我正在尝试将 SignIn.js 中用户输入的请求连接到 server.js,它向我发送了 "signin:1 POST http://localhost:3000/signin 400 (Bad Request)" 错误
虽然我尝试在 Postman 上发送 json 它有效。
我还得到:
events.js:174
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE: address already in use :::3000
at Server.setupListenHandle [as _listen2] (net.js:1277:14)
at listenInCluster (net.js:1325:12)
at Server.listen (net.js:1412:7)
at Function.listen (C:\Users\zehav\final-project\node_modules\express\lib\application.js:618:24)
at Object.<anonymous> (C:\Users\zehav\final-project\server.js:72:5)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
Emitted 'error' event at:
at emitErrorNT (net.js:1304:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)
我该怎么办?谢谢!
------server.js------
const express = require('express');
const bodyParser = require('body-parser');
const bcrypt = require('bcrypt');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(bodyParser.json());
const database = {
users: [
{
id: '123',
name: 'tal',
email: 'tal@gmail.com',
password: '123'
}
]
}
app.post('/signin', (req, res) =>
{
bcrypt.hash(req.body.password, 10, function(err, hash) {
console.log(hash);
});
console.log(req.body.email)
console.log(req.body.password)
if ((req.body.email === database.users[0].email) && (req.body.password === database.users[0].password)) {
res.json('success');
} else {
res.status(400).json('error logging in')
}
})
app.listen(3000, () => {console.log("app is running...")});
--------SignIn.js--------
import React, {Component} from 'react';
import './SignIn.css';
class SignIn extends Component {
constructor(props){
super(props);
this.state=
{username: '',
password: ''
}
}
onUserNameChange = (event) => {
this.setState({username: event.target.value});
console.log(this.state);
}
onPasswordChange = (event) => {
this.setState({username: event.target.value});
console.log(this.state);
}
onSubmitSignIn = () => {
fetch('http://localhost:3000/signin', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(({
email: this.state.username,
password: this.state.password
}))
}).then( response => response.json()).then(data => {
if (data === 'success'){
this.props.onRouteChange('home');
}
})
}
render () {
return (
<div id="parent">
<div className="ui-link-card">
<div className="ui form segment">
<div className="field">
<label className="headers">Username</label>
<div className="ui left labeled icon input">
<input className="headers" type="text" placeholder="username" onChange={this.onUserNameChange}/>
<i className="user icon"></i>
<div className="ui corner label">
<i className="icon asterisk"></i>
</div>
</div>
</div>
<div className="field">
<label className="headers">Password</label>
<div className="ui left labeled icon input">
<input className="headers" type="password" placeholder="password" onChange={this.onUserNameChange}/>
<i className="lock icon"></i>
<div className="ui corner label">
<i className="icon asterisk"></i>
</div>
</div>
</div>
<div className="ui error message">
<div className="header">We noticed some issues</div>
</div>
<div id="loginBtn" className="ui blue submit button" onClick={this.onSubmitSignIn}>
Login
</div>
</div>
</div>
</div>
);
}
}
export default SignIn;
EADDRINUSE
是您在同一端口上尝试 运行 多个 Node
服务器时遇到的错误。如果您找不到该进程或者它 运行 在后台运行,请在 Windows CMD
上尝试此命令
C:\>netstat -ano | find "LISTENING" | find "3000"
输出的第五列是进程ID:
TCP 0.0.0.0:3000 0.0.0.0:0 LISTENING 14828
TCP [::]:3000 [::]:0 LISTENING 14828
然后你可以像这样终止进程taskkill /pid 14828
。
现在你的第二个错误,因为它看起来一切正常我刚刚发现在你的 body
参数中你有一对额外的括号。这是固定版本
onSubmitSignIn = () => {
fetch('http://localhost:3000/signin', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
email: this.state.username,
password: this.state.password
})
}).then( response => response.json()).then(data => {
if (data === 'success'){
this.props.onRouteChange('home');
}
})
}
这意味着您 运行 您的服务器所在的端口已被保留或正在您系统的某处使用,因此您必须遵循这两个简单的步骤。
1>> lsof -i:port number
2>> kill -9 pid
我正在尝试将 SignIn.js 中用户输入的请求连接到 server.js,它向我发送了 "signin:1 POST http://localhost:3000/signin 400 (Bad Request)" 错误 虽然我尝试在 Postman 上发送 json 它有效。
我还得到:
events.js:174
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE: address already in use :::3000
at Server.setupListenHandle [as _listen2] (net.js:1277:14)
at listenInCluster (net.js:1325:12)
at Server.listen (net.js:1412:7)
at Function.listen (C:\Users\zehav\final-project\node_modules\express\lib\application.js:618:24)
at Object.<anonymous> (C:\Users\zehav\final-project\server.js:72:5)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
Emitted 'error' event at:
at emitErrorNT (net.js:1304:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
at Function.Module.runMain (internal/modules/cjs/loader.js:745:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:743:3)
我该怎么办?谢谢!
------server.js------
const express = require('express');
const bodyParser = require('body-parser');
const bcrypt = require('bcrypt');
const cors = require('cors');
const app = express();
app.use(cors());
app.use(bodyParser.json());
const database = {
users: [
{
id: '123',
name: 'tal',
email: 'tal@gmail.com',
password: '123'
}
]
}
app.post('/signin', (req, res) =>
{
bcrypt.hash(req.body.password, 10, function(err, hash) {
console.log(hash);
});
console.log(req.body.email)
console.log(req.body.password)
if ((req.body.email === database.users[0].email) && (req.body.password === database.users[0].password)) {
res.json('success');
} else {
res.status(400).json('error logging in')
}
})
app.listen(3000, () => {console.log("app is running...")});
--------SignIn.js--------
import React, {Component} from 'react';
import './SignIn.css';
class SignIn extends Component {
constructor(props){
super(props);
this.state=
{username: '',
password: ''
}
}
onUserNameChange = (event) => {
this.setState({username: event.target.value});
console.log(this.state);
}
onPasswordChange = (event) => {
this.setState({username: event.target.value});
console.log(this.state);
}
onSubmitSignIn = () => {
fetch('http://localhost:3000/signin', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(({
email: this.state.username,
password: this.state.password
}))
}).then( response => response.json()).then(data => {
if (data === 'success'){
this.props.onRouteChange('home');
}
})
}
render () {
return (
<div id="parent">
<div className="ui-link-card">
<div className="ui form segment">
<div className="field">
<label className="headers">Username</label>
<div className="ui left labeled icon input">
<input className="headers" type="text" placeholder="username" onChange={this.onUserNameChange}/>
<i className="user icon"></i>
<div className="ui corner label">
<i className="icon asterisk"></i>
</div>
</div>
</div>
<div className="field">
<label className="headers">Password</label>
<div className="ui left labeled icon input">
<input className="headers" type="password" placeholder="password" onChange={this.onUserNameChange}/>
<i className="lock icon"></i>
<div className="ui corner label">
<i className="icon asterisk"></i>
</div>
</div>
</div>
<div className="ui error message">
<div className="header">We noticed some issues</div>
</div>
<div id="loginBtn" className="ui blue submit button" onClick={this.onSubmitSignIn}>
Login
</div>
</div>
</div>
</div>
);
}
}
export default SignIn;
EADDRINUSE
是您在同一端口上尝试 运行 多个 Node
服务器时遇到的错误。如果您找不到该进程或者它 运行 在后台运行,请在 Windows CMD
C:\>netstat -ano | find "LISTENING" | find "3000"
输出的第五列是进程ID:
TCP 0.0.0.0:3000 0.0.0.0:0 LISTENING 14828
TCP [::]:3000 [::]:0 LISTENING 14828
然后你可以像这样终止进程taskkill /pid 14828
。
现在你的第二个错误,因为它看起来一切正常我刚刚发现在你的 body
参数中你有一对额外的括号。这是固定版本
onSubmitSignIn = () => {
fetch('http://localhost:3000/signin', {
method: 'post',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
email: this.state.username,
password: this.state.password
})
}).then( response => response.json()).then(data => {
if (data === 'success'){
this.props.onRouteChange('home');
}
})
}
这意味着您 运行 您的服务器所在的端口已被保留或正在您系统的某处使用,因此您必须遵循这两个简单的步骤。
1>> lsof -i:port number
2>> kill -9 pid