POST http://localhost:5000/api/auth/login 404 (Not Found)
I am trying to do a login page.After login, the data is obtained from mongodb.After I input my credentials to the login page,it should direct me to the home page but instead it is giving me this error
This is the error I got in my browser.
POST http://localhost:5000/api/auth/login 404 (Not Found)
dispatchXhrRequest @ xhr.js:210
xhrAdapter @ xhr.js:15
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:108
Axios.<computed> @ Axios.js:140
wrap @ bind.js:9
login @ apiCalls.js:7
handleClick @ Login.jsx:78
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
This is my router file.
//LOGIN
router.post('/login', async (req, res) => {
try{
const user = await User.findOne(
{
userName: req.body.user_name
}
);
!user && res.status(401).json("Wrong User Name");
const originalPassword = user.password
const inputPassword = req.body.password;
originalPassword != inputPassword &&
res.status(401).json("Wrong Password");
const { password, ...others } = user._doc;
;
}catch(err){
res.status(500).json(err);
}
});
This is my index.js file.
app.use("/api/authentication" , authenticationRoute);
This is my frontend login page section.
const Login = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const dispatch = useDispatch();
const { isFetching, error} = useSelector((state) => state.user);
const handleClick =(e) =>{
e.preventDefault();
login(dispatch, {username,password});
}
The frontend login page tags section is basically like this
placeholder = "Username"
onChange={(e)=> setUsername(e.target.value)}/>
<Input
placeholder = "Password"
type = "password"
onChange={(e)=> setPassword(e.target.value)}/>
<Button onClick={handleClick} disabled={isFetching}>LOGIN </Button>
{error && <Error>Something went wrong!</Error>}
Solution 1:
In your backend you had declared your login route like http://localhost:5000/api/authentication/login
, but in the frontend you call to http://localhost:5000/api/auth/login
so you had that 404 Not Found
.