MongoDB POST Requests will work in Postman but not in browser

1

Odds are this is something very simple but can be a teaching moment. As the subject says, when I run a POST request in Postman the POST will be added to the database with 3 fields: id, number, and __v. However, when I do it in the browser it will only add an id and a __v variable. The first set of code below is the React page for the form. I have it posting the data to my backend at localhost:4000/add_refill. I will point out that my frontend is localhost:3000, so I am wondering if this is causing any problems. Anyway, here is the code for my form page.

import React from 'react';
import { FormControl } from '@material-ui/core';
import { InputLabel } from '@material-ui/core';
import { Input } from '@material-ui/core';
import { FormHelperText } from '@material-ui/core';
import { Button } from '@material-ui/core';
import axios from 'axios';

class AddRefill extends React.Component {

    state = {
        number: ''
    }

    handleChange = (event) => {
        this.setState({
            number: event.target.value
        })
        console.log(this.state.number)
    }

    handleSubmit = (event) => {
        event.preventDefault()
        this.setState({
            number: ''
        })

    }

    render() {
        return (
            <div>
                            <form method="POST" action='http://localhost:4000/add_refill' 
                            onSubmit={this.handleSubmit}
                            >
            <input id="number" name="number" type="text" value={this.state.number} onChange={this.handleChange} />
            <input type='submit' />
          </form>
            </div>

        )

    }
}

export default AddRefill;

Now here is my server.js page on the backend that contains what receives the the POST request, which is the add_refill route.

const express = require('express');

var cors = require('cors')

var mongoose = require('mongoose');

var mongoDB = 'mongodb://127.0.0.1/un_database';

require('./models/Refills')

mongoose.connect(mongoDB, { useNewUrlParser: true });

var db = mongoose.connection;

db.on('error', console.error.bind(console, 'MongoDB connection error:'));

const app = express();

app.use(cors());

app.use(express.json());

app.use(express.urlencoded());

 app.get('/', (req, res) => {

    Refill.find({}, function(err, refills){

        let RefillMap = {};

        refills.forEach(function(refill){

        RefillMap[refill._id] = refill;            

        });

    res.send(RefillMap);

    });

});

app.post('/add_refill', (req, res) => {0

    // let vars = req.body;

    let NewRefill = new Refill(req.body);

    NewRefill.save()

    .then((data) => {

        console.log(data);

    })

    .catch((err) => {

        console.log(err);

    })

})

app.listen(4000, () => {

    console.log('App listening to you')

})

Now here is the Mongoose Model page where I create the table the POST data will be doing to:

var mongoose = require('mongoose');

var Schema = mongoose.Schema;

var RefillSchema = new Schema({ number: String});

module.exports = Refill = mongoose.model('Refill', RefillSchema);

I will be waiting for a reply so we can discuss it. Thanks ahead of time for your help.

2

May be the form is posting number as string and your db is rejecting it. You can do a simple console log right before inserting to see what’s going on.

3

Hey if you look at the segment where I create the Schema for the table I’m posting to, number is a string.

4

In your code at: handleSubmit
you are setting number to blank string.

Why don’t you console.log(req.body) right before NewRefill.save() to see if all the data are actually being submitted.

5

This was actually it. Thanks! The final code looks like:

    handleSubmit = (event) => {
        event.preventDefault()
        let num = {
            number: this.state.number
        }
        axios.post('http://localhost:4000/add_refill', num)
        this.setState({
            number: ''
        })

    }

So I guess I just have to make sure I don’t reset the state back to blank before posting.