'POST request error with node.js server and react app

can any one help me plz, I'm working in the final project from Udemy's Full Stack Web developer course, and I'm getting stuck at connecting my front and back-end. I'm getting a 404 when making a post request for sign in (with the browsers) and I'm not sure why, i think the problem in my front end, because if i register with a string without '@' or capital letter, every think work fine, and in Postman also every think work fine even withe email(string withe @ or capital letter)
my code:

in signin.js(back end):

const handelSignin=(req,res,db,bcrypt)=>{
    const {email,password}=req.body;

    db.select('email','hash').from('login')
        .where('email','=',email)    
        .then(data=>{
            const isValid=bcrypt.compareSync(password,data[0].hash)
            if(isValid){
                return db.select('*').from('users')
                .where('email','=',email)
                .then(user=>{
                    res.json(user[0])
                })
                .catch(err=>res.status(400).json('try again'))
            }else{
                res.status(403).json('wrong username or password')
                console.log('wrong user name or password')
            }
        })
    .catch(err=>res.status(400).json('cant slove'))
};

module.exports={
    handelSignin:handelSignin
}

in server.js:

app.post('/signin',(req,res)=>{
    signin.handelSignin(req,res,db,bcrypt)
});

in Signin.js(front end) i think the problem here:

class Signin extends Component {
    constructor(props){
        super(props)
        this.state={
            email:'',
            password:''
        }
    }

    onEmailChange=(event)=>{
        this.setState({email:event.target.value.toLowerCase()})
    }

    onPasswordChange=(event)=>{
        this.setState({password:event.target.value})
    }

    onSubmit=()=>{
        fetch('http://localhost:3001/signin',{
            method:'post',
            headers:{
                'Content-type': 'application/json'
            },
            body:JSON.stringify({
                email:this.state.email,
                password:this.state.password
            })
        })
            .then(res=>res.json())
            .then(user=>{
                if(user){
                    this.props.loadUser(user);
                    this.props.onRouteChange('Home');
                    console.log(user)
                }
            })
            .catch(console.log)
    }

    render(){
        const {onRouteChange}=this.props;
        return (
            <article className="br3 shadow-5 ba  b--black-10 mv4 w-100 w-50-m w-25-l mw5 center">
        <div >
            <main  className="pa4 black-80 center">
                <form className="measure">
                    <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
                    <legend className="f4 fw6 ph0 mh0">Sign In</legend>
                    <div className="mt3">
                        <label className="db fw6 lh-copy f6" htmlFor="email-address">Email or name</label>
                        <input 
                            className="pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" 
                            type="email" 
                            name="email-address"  
                            autoComplete='username'
                            onChange={this.onEmailChange}
                            id="email-address"
                        ></input>
                    </div>
                    <div className="mv3">
                        <label className="db fw6 lh-copy f6" htmlFor="password">Password</label>
                        <input 
                            className="b pa2 input-reset ba bg-transparent hover-bg-black hover-white w-100" 
                            type="password" 
                            autoComplete='current-password'
                            name="password"  
                            onChange={this.onPasswordChange}
                            id="password"
                        ></input>
                    </div>
                    </fieldset>
                    <div className="">
                    <input 
                        onClick={this.onSubmit} 
                        className="b ph3 pv2 input-reset ba b--black bg-transparent grow pointer f6 dib" 
                        type="submit" 
                        value="Sign in"
                    ></input>
                    </div>
                    <div className="lh-copy mt3">
                    <a onClick={()=>onRouteChange('Register')} href="#0" className="f6 link dim black db">Register</a>
    </div>
  </form>
</main>
        </div>
        </article>
    )
}
}

export default Signin

in app.js:

const initialstate={
  input:'',
  imageUrl:'',
  box:{},
  route:'Signin',
  isSignIn:false,
  user:{
    id:'',
    name:'',
    password:'',
    email:'',
    entries:0,
    joined:''
  }
};

class App extends Component {
constructor(){
  super()
  this.state=initialstate;
}

loadUser=(data)=>{
  this.setState({user:{
    id:data.id,
    name:data.name,
    email:data.email,
    entries:data.entries,
    joined:data.joined
  }})
}

onSubmit=()=>{
  this.setState({imageUrl:this.state.input})
 
  app.models
  .predict(
    Clarifai.FACE_DETECT_MODEL,
    this.state.input)
    .then(response=>{
      if (response){
        fetch('http://localhost:3001/image',{
            method:'put',
            headers:{
                'Content-type': 'application/json'
            },
            body:JSON.stringify({
                id:this.state.user.id
            })
        })
            .then(res=>res.json())
            .then(data=>{
                this.setState(Object.assign(this.state.user, {entries:data}))
            })
            .catch(console.log)
      }
      this.displayFaceBox(this.calculateFaceLocation(response))
    })
    .catch(e=>console.log(e))

}

and display this in address bar(http://localhost:3000/?email-address=abd%40gmail.com&password=abd) (edited)



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source