-2

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;
4

2 に答える 2