Hello everyone , i am trying to post data from my front end to my database and show that data in a text in my frontend for some reasons that i don’t know im getting 400 bad requests here is my API app code :
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mongoose = require('mongoose');
const Content = require('./models/content');
const content = require('./models/content');
mongoose.connect('mongodb+srv://notority:*******@cluster0.gnnjy.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',
{ useNewUrlParser: true,
useUnifiedTopology: true })
.then(() => console.log('Connexion à MongoDB réussie !'))
.catch(() => console.log('Connexion à MongoDB échouée !'));
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
next();
});
app.post('/api/test', (req, res, next) => {
const content = new Content({
...req.body
})
content.save()
.then(() => res.status(201).json({ message: 'Objet enregistré !'}))
.catch(error => res.status(400).json({ error }));
});
app.use('/api/test', (req, res, next) => {
content.find()
.then(content => res.status(200).json(content))
.catch(error => res.status(400).json({ error }));
});
module.exports = app;
my mongodb model:
const mongoose = require('mongoose');
const contentSchema = mongoose.Schema({
user: { type: String, required: true },
text: {type: String, required: true}
});
module.exports = mongoose.model('content', contentSchema);
and this is my react App.js :
import './App.css';
import React from 'react';
import axios from 'axios';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
result: null
};
}
componentDidMount() {
const Content = {
user: "test",
text:"test"
}
axios.post('http://localhost:3000/api/test', Content)
.then(response => this.setState({ result: response.data.id }));
}
render() {
return (
<div>
<h1>{this.state.result}</h1>
</div>
)
}
}
export default App;
can you guys help me with this?