Problem with express API

Hello everyone :smiley: , 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? :smiley:

My guess would be that it’s the app.use('/api/test',... which is failing to execute .find() on [lowercase] content.

Sorry i forgot to specify that the data is not even beign added to my database

Ok, so I ran your code and looks like you’re not parsing the body.

1 Like

it works the post request is working , thank you :smiley: but there’s still a lil thing that im not getting i did a get request on postman to check if my app.use(’/api/test’,… is working properly and i guess it is since the get request returns the data but my property result (the one supposed to take response.data) is still null

If you mean your React code, then it’s because response will be an array on response.data.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.