POST Status Code: 404 Not Found ERROR: Cannot POST /api/users/signup - node.js

Question

I'm working on a project using react.js in the frontend and node.js in the backend. I keep getting a POST Status Code: 404 Not Found error in my code for my signup page. Specifically, I'm getting: Cannot POST /api/users/signup. I've gone over my code a number of times, and I can't figure out what could be causing this error. I would really appreciate any help or advice on why this could be occurring. Thank you!
Frontend:
SignInScreen:
import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {signup} from "../actions/userActions";
import { useNavigate } from 'react-router-dom'
export default function SignupScreen(props) {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
console.log(email, password, confirmPassword)
const userSignUp = useSelector((state) => state.userSignUp);
const { userInfo, loading, error } = userSignUp;
let navigate = useNavigate()
const dispatch = useDispatch();
const submitHandler = (e) => {
e.preventDefault();
if (password !== confirmPassword) {
alert('Password and confirm password do not match');
} else {
dispatch(signup( email, password));
navigate ('/onboarding')
}
}
return (
<div className="auth">
<h2>CREATE ACCOUNT</h2>
<form onSubmit={submitHandler}>
<input
type="email"
id="email"
name="email"
placeholder="email"
required={true}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
id="password"
name="password"
placeholder="password"
required={true}
onChange={(e) => setPassword(e.target.value)}
/>
<input
type="password"
id="password-check"
name="password-check"
placeholder="confirm password"
required={true}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
<input className="secondary-button" type="submit"/>
</form>
</div>
);
}
userActions.js
import Axios from 'axios';
import {
USER_SIGNUP_FAIL,
USER_SIGNUP_REQUEST,
USER_SIGNUP_SUCCESS,
} from '../constants/userConstants';
export const signup = (email, password) => async (dispatch) => {
dispatch({ type: USER_SIGNUP_REQUEST, payload: { email, password } });
try {
const { data } = await Axios.post('/api/users/signup', {
email,
password,
});
dispatch({ type: USER_SIGNUP_SUCCESS, payload: data });
dispatch({ type: USER_LOGIN_SUCCESS, payload: data });
localStorage.setItem('userInfo', JSON.stringify(data));
} catch (error) {
dispatch({
type: USER_SIGNUP_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
backend:
server.js
import express from 'express';
import cors from 'cors';
import mongoose from 'mongoose';
import dotenv from 'dotenv';
import {v4} from 'uuid';
import bcrypt from 'bcrypt';
import userRouter from './routers/userRouter.js';
dotenv.config();
const app = express()
app.use(cors())
app.use(express.json())
mongoose.connect(process.env.MONGODB_URL || 'mongodb://localhost/TC', {
useNewUrlParser: true,
useUnifiedTopology: true,
/*useCreateIndex: true,*/
});
app.use('/api/users', userRouter);
app.get('/', (req, res) => {
res.send('Server is ready');
})
app.use((err, req, res, next) => {
res.status(500).send({ message: err.message });
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`Serve at http://localhost:${port}`);
});
userRouter.js
import express from 'express';
import expressAsyncHandler from 'express-async-handler';
import bcrypt from 'bcrypt';
import User from '../models/userModel.js';
import { generateToken, isAdmin, isAuth } from '../utils.js';
const userRouter = express.Router();
userRouter.post(
'/signup',
expressAsyncHandler(async (req, res) => {
const user = new User({
email: req.body.email,
password: bcrypt.hashSync(req.body.password, 8),
});
const createdUser = await user.save();
res.send({
_id: createdUser._id,
email: createdUser.email,
isAdmin: createdUser.isAdmin,
token: generateToken(createdUser),
});
}),
);
export default userRouter;

Answer 1

I think that you are missing the localhost in your axios call:
instead of:
const { data } = await Axios.post('/api/users/signup', {
...
try:
const { data } = await Axios.post('http://localhost:5000/api/users/signup', {