在 MERN 堆栈应用程序中将前端连接到后端

Question

I am working on an Exercise tracker application using MERN stack. I am facing an error and I am not being able to render it. create-user.componet.js file:-

import React, { Component } from 'react';
const axios=require('axios');

 class CreateUser extends Component {
    constructor(props)
    {
        super(props);

        this.onChangeUsername=this.onChangeUsername.bind(this);//even binding
        this.onSubmit = this.onSubmit.bind(this);//event binding


        this.state={
            username: '',
            
        }
    }
    onChangeUsername(e) {
        this.setState({
          username: e.target.value
        })
      }
      onSubmit(e){
        e.preventDefault() //prevents from default process and implements the lined following

        const user={
            username: this.state.username
           
        };
        console.log(user)

        //connecting the front end to the backend. On submit the username will be stored in the backend.This is done by using axios
        axios.post('http://localhost:3000/users/add',user)//accesses the route mentioned in user.js and hence connecting to the backend
        .then(res=> {
            console.log(res)
            console.log(res.data)});
        
        this.setState({
          username: ''
      })
    }
    render() {
        return (
            <div>
                <h3>Create New User</h3>
                <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                    <label>Username: </label>
                <input  type="text"
                         required
                         className="form-control"
                         value={this.state.username}
                         onChange={this.onChangeUsername}/>
                        
                    </div>
                    <div className="form-group">
                        <input type="submit" value="Create User" className="btn btn-primary">
                        </input>
                    </div>
                </form>
            </div>
        )
    }
}

export default CreateUser

route fie:-

    const router=require('express').Router();
let User=require('../models/user.model')

router.route('/').get((req,res) => {
    User.find()
    .then(users => res.json(users))
    .catch(err => res.status(400).json('Error:'+err))

});
router.post('/add', function(req, res)  {
    const username = req.body.username;
  
    const newUser = new User({username});
  
    newUser.save()
      .then(() => res.json('User added!'))
      .catch(err => res.status(400).json('Error: ' + err));
  });
module.exports=router;

error:

POST http://localhost:3000/users/add 404 (Not Found)

On implementing the application the above error is being showed, whereas the api is working fine when tested in insomnia(tool).

Could someone help to render this issue?

Answer 1

I think you are targeting the wrong route,

in your server you have

router.post('/add', function(req, res)

But in the client you target

axios.post('http://localhost:3000/users/add',user)

Try changing it to

axios.post('http://localhost:3000/add',user)

Or try changing the server to

router.post('/users/add', function(req, res)