I am attempting to send data via a post request from react.js to express.js using axios, but I keep encountering a 404 not found axios error. You can view the error image here.
Below is my code:
export default function Upload() {
const [state, setState] = useState({
title: "",
desc: ""
});
const handleTextChange = (event) => {
const value = event.target.value;
setState({...state, [event.target.name]:value});
}
const handleSubmit = async e => {
e.preventDefault();
const Data= {
title: state.title,
desc: state.desc
};
axios
.post("http://localhost:5000/uploadData", Data)
.catch(console.log);
}
return(
<div>
<h1>Upload your video</h1>
<Stack gap={2}>
<Form onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="formTitle">
<Form.Label>Title</Form.Label>
<Form.Control type="text" name="title" />
</Form.Group>
<Form.Group className="mb-3" controlId="formDesc">
<Form.Label>Description</Form.Label>
<Form.Control as="textarea" rows={3} name="desc" onChange={handleTextChange} />
</Form.Group>
<Button variant="outline-primary" type="submit">submit</Button>
<Button variant="outline-light" type="reset">reset</Button>
</Form>
</Stack>
</div>
);
}
Express.js code on the server side:
const express = require("express");
const bodyParser = require('body-parser');
const router = express.Router();
onst app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
router.post("/uploadData", async (req, res) => {
try{
const newVideo = await Videos.create({title: req.body.title, desc: req.body.desc});
res.send({newVideo});
} catch(err) {
res.status(400).send({error: err});
}
});
const port = 5000;
app.listen(port, () => {
console.log(`Server Listening on ${port}`);
});
Could someone please help identify the error in my code?