MongoDB POST Requests will work in Postman but not in browser

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) => {

    handleSubmit = (event) => {
            number: ''


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



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://';


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

var db = mongoose.connection;

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

const app = express();




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

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

        let RefillMap = {};


        RefillMap[refill._id] = refill;            




});'/add_refill', (req, res) => {0

    // let vars = req.body;

    let NewRefill = new Refill(req.body);

    .then((data) => {



    .catch((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.

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.

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

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

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

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

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


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