I'am building a money manager application using MERN Stack, I am not able to post the data in the database, if I click on the register button it throws an error that it Cannot POST /api/users/register, I have also put a proxy pointing it to the server in React's package.json, but still, it doesn't work, what can be done to fix this error

Register.js

import { Form, message } from "antd";
import Input from "antd/lib/input/Input";
import React from "react";
import { Link } from "react-router-dom";
import "../resources/authentication.css";
import axios from "axios"

function Register() {

    const onFinish = async (values) => {
        try {
          await axios.post('/api/users/register', values)
          message.success("Registration Successful")
        } catch (error) {
          message.error("Something Went Wrong")
        }
    }

  return (
    <div className="register">
      <div className="row justify-content-center align-items-center w-100 h-100">
        <div className="col-md-5">
          <div className="lottie">
            <lottie-player
              src="https://assets5.lottiefiles.com/packages/lf20_t74j51tv.json"
              background="transparent"
              speed="1"
              loop
              autoplay
            ></lottie-player>
          </div>
        </div>
        <div className="col-md-5">
          <Form layout="vertical" onFinish={onFinish}>
            <h1>Money Manager / Register</h1>
            <br/>
            <Form.Item label="Name" name="name">
              <Input />
            </Form.Item>
            <Form.Item label="Email" name="email">
              <Input />
            </Form.Item>
            <Form.Item label="Password" name="password">
              <Input />
            </Form.Item>

            <div className="d-flex justify-content-between align-items-center">
              <Link to="/login">Already Registered, Click Here To Login</Link>
              <button className="primary" type="submit">REGISTER</button>
            </div>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default Register;

usersRoute.js

const express = require("express");
const User = require("../models/User");
const router = express.Router();

router.post("/login", async function (req, res) {
  try {
    const result = await User.findOne({
      email: req.body.email,
      password: req.body.password,
    });

    if (result) {
      res.send(result);
    } else {
      res.status(500).json("Error");
    }
  } catch (error) {
    res.status(500).json(error);
  }
});


router.post("/register", async function (req, res) {
    try {
      const newuser = new User(req.body);
      await newuser.save();
      res.send('User Registered Successfully')
    } catch (error) {
      res.status(500).json(error);
    }
  });


  module.exports = router

server.js

const express = require('express')
const dbConnect = require('./DbConnect')
const app = express()
app.use(express.json())
const userRoute = require('./routes/usersRoute')

app.use('./api/users/', userRoute)


const port = 5000

app.listen(port, () => console.log(`Node JS Server started at port ${port}!`))

React's package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^4.23.4",
    "aos": "^2.3.4",
    "axios": "^1.1.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.4",
    "react-router-dom": "^6.4.2",
    "react-scripts": "5.0.1",
    "redux": "^4.2.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

CodePudding user response：

Just delete dot. Change it

app.use('./api/users/', userRoute)

to it

app.use('/api/users/', userRoute)