Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – MERN: Backend CRUD established. Frontend failing to connect

Node/express backend CRUD is successfully working as demonstrated with Postman. Trying to connect the frontend React/Axios to backend, but failing (my first time doing this). Specifically, AxiosError: Request failed with status code 404.

My working route and handler function

userRouter.route("/").post(createUser);

const createUser = async (req, res) => {
  try {
    const newUser = await User.create(req.body);
    res.status(201).json({
      status: "success",
      data: { newUser },
    });
  } catch (err) {
    res.status(400).json({
      status: "failed",
      message: err,
    });
  }
};

And the form handler

const Submit = (e) => {
    e.preventDefault();
    axios
      .post("http://localhost:3040/createUser", {
        name,
        email,
      })
      .then((result) => console.log(result))
      .catch((err) => console.log(err));
  };

I am uncertain if more code is needed, so I am supplying a GitHub link to the project:
https://github.com/donpayne199/Mern_CRUD

I am dead in the water on this. Would someone please educate me on this?

Tags:

2

Answers


  1. 0

    Your route is defined as /api/users based on the repository you shared, but it seems you are posting to /createUser. There is a mismatch between the expected route and the endpoint you are using to create a user.

    Login or Signup to reply.
  2. 0

    Please try this using express

    const express = require('express');


const router = new express.Router();
router.post("/createUser",createUser);

const createUser = async (req, res) => {
  try {
    const newUser = await User.create(req.body);
    res.status(201).json({
      status: "success",
      data: { newUser },
    });
  } catch (err) {
    res.status(400).json({
      status: "failed",
      message: err,
    });
  }
};

    And the form handler

    const Submit = (e) => {
    e.preventDefault();
    axios
      .post("http://localhost:3040/createUser", {
        name,
        email,
      })
      .then((result) => console.log(result))
      .catch((err) => console.log(err));
  };
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search