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;