React: POST API call embedding wrong path - reactjs

Question

I created my project using CRA react CLI and I have stored data in a local JSON file in the public folder.
I have a Login Component. This is where I am making all the POST API calls using Axios and I've also have some other stuff. This component is later being imported inside Auth Layout.
The problem is: On submit, it is sending the POST request to the wrong path. It should send to /data/api/v1/login.json instead it is sending to http://localhost:3000/auth/data/api/v1/login.json.
I think this could be since the login component is loading from the auth layout. but, not sure how to resolve it.
Login component
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
//api calls
import axios from "axios";
import { setUserSession } from "../../Common/Utils/Common.js";
import { Button, Form, Input, InputGroup, InputGroupAddon } from "reactstrap";
const Login = (props) => {
const [loading, setLoading] = useState(false);
const username = useFormInput("");
const password = useFormInput("");
const [error, setError] = useState(null);
const handleLogin = () => {
setError(null);
setLoading(true);
axios
.post("data/api/v1/login.json", {
username: username.value,
password: password.value,
})
.then((response) => {
console.log("response", response);
setLoading(false);
setUserSession(response.data.token, response.data.user);
props.history.push("/admin/dashboard");
})
.catch((error) => {
setLoading(false);
if (error.response.status === 401)
setError(error.response.data.message);
else setError("Something went wrong. Please try again later.");
});
};
return (
<div className="container-fluid backgroundContainer">
<div className="Login">
<div className="login-form-container">
<div className="logo">
<img src={Logo} className="App-logo" alt="logo" />
</div>
<div className="content">
<Form className="login-form">
<h3 className="form-title">Welcome</h3>
<InputGroup>
<InputGroupAddon
className="input-group-addon"
addonType="prepend"
>
<i className="fa fa-user"></i>
</InputGroupAddon>
<Input
autoFocus
type="email"
aria-label="Username"
aria-describedby="username"
aria-invalid="false"
placeholder="Username or Email"
{...username}
/>
</InputGroup>
<InputGroup>
<InputGroupAddon
className="input-group-addon"
addonType="prepend"
>
<i className="fa fa-lock"></i>
</InputGroupAddon>
<Input
value={password}
placeholder="Password"
aria-label="password"
aria-describedby="password"
{...password}
// onChange={(e) => setPassword(e.target.value)}
type="password"
/>
</InputGroup>
<div className="form-actions">
{error && (
<>
<small style={{ color: "red" }}>{error}</small>
<br />
</>
)}
<br />
<button
className="pull-right"
block="true"
type="submit"
value={loading ? "Loading..." : "Login"}
onClick={handleLogin}
disabled={loading}
>
Login
</button>
<br />
</div>
<div className="forgotPassword">
<Link to="/auth/resetpassword">Forgot password?</Link>
</div>
</Form>
</div>
</div>
</div>
</div>
);
};
const useFormInput = (initialValue) => {
const [value, setValue] = useState(initialValue);
const handleChange = (e) => {
setValue(e.target.value);
};
return {
value,
onChange: handleChange,
};
};
export default Login;
Auth layout
import React from "react";
import Login from "../../components/pages/login/Login";
class Pages extends React.Component {
render() {
return (
<div className="wrapper wrapper-full-page" ref="fullPages">
<div className="full-page">
<Login {...this.props}></Login>
</div>
</div>
);
}
}
export default Pages;
Common.js this is a common service using in the login component.
// return the user data from the session storage
export const getUser = () => {
const userStr = sessionStorage.getItem('user');
if (userStr) return JSON.parse(userStr);
else return null;
}
// return the token from the session storage
export const getToken = () => {
return sessionStorage.getItem('token') || null;
}
// remove the token and user from the session storage
export const removeUserSession = () => {
sessionStorage.removeItem('token');
sessionStorage.removeItem('user');
}
// set the token and user from the session storage
export const setUserSession = (token, user) => {
sessionStorage.setItem('token', token);
sessionStorage.setItem('user', JSON.stringify(user));
}

Answer 1

You need the leading slash in your axios call, Change
axios.post("data/api/v1/login.json", {
username: username.value,
password: password.value,
})
to
axios.post("/data/api/v1/login.json", {
username: username.value,
password: password.value,
})
This will fix the problem with it adding the sub-path to your api call.