I am working on an exercise tracker app using the MERN stack. I have a react JS ponent that is meant to allow me to add a new user to a database after I press the submit button. I am using axios to send http requests from my front end to server endpoint on the backend. However I keep getting this error

POST https://localhost:5000/users/add net::ERR_CONNECTION_REFUSED Uncaught (in promise) Error: Network Error at createError (0.chunk.js:971) at XMLHttpRequest.handleError (0.chunk.js:466)

This is my server side code

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');
//mongoose is whats going to help us connect to our mongoDB database


require('dotenv').config();
//this configures si we can have our environment variables in the dotenv file

const app = express();
const port = process.env.PORT || 5000;
//this is how we will create our express server 

app.use(cors());
app.use(express.json());
//this is our middle ware this will allopw us to parse json
// cause the server will be sending s=and receiving json

const uri = process.env.ATLAS_URI;
mongoose.connect(uri, {useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology:true});
//uri is where database is stored
const connection = mongoose.connection;
connection.once('open',() =>{
    console.log("MongoDB database connection established successfully");
});
//once connection is open its going to log the message

const exercisesRouter = require('./routes/excercises');
const usersRouter = require('./routes/users');
//importing 

app.use('/excercises',exercisesRouter);
app.use('/users',usersRouter);
//use files
//whenever somebody goes to route url and put /excersies at the end it will show
//everything in excercises and the same for users


app.listen(port,()=>{
    console.log('Server is running on port: ' + port);
});
//this is what starts the server. It start listening to a certain port

This is my submit function

onSubmit(e){
        e.preventDefault(); //prevents default html form behaviour taking place
        const user = {
            username: this.state.username,
        };

        console.log(user);

        //sending user data to the backend with post request
        //check user.js file in routes its sending a post request to the user.add api
        axios.post('https://localhost:5000/users/add',user)
            .then(res => console.log(res.data));

        this.setState({
            username: ''
        });
    }

This is my route

router.route('/add').post((req,res) => {
    const username = req.body.username;

    const newUser = new User({username});
    //using unsername to create new user

    newUser.save()
        .then(() => res.json('User added')) //after user saved to DB return user added message
        .catch(err => res.status(400).json('Error ' + err)); //if there is an error return error
});

I am working on an exercise tracker app using the MERN stack. I have a react JS ponent that is meant to allow me to add a new user to a database after I press the submit button. I am using axios to send http requests from my front end to server endpoint on the backend. However I keep getting this error

POST https://localhost:5000/users/add net::ERR_CONNECTION_REFUSED Uncaught (in promise) Error: Network Error at createError (0.chunk.js:971) at XMLHttpRequest.handleError (0.chunk.js:466)

This is my server side code

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');
//mongoose is whats going to help us connect to our mongoDB database


require('dotenv').config();
//this configures si we can have our environment variables in the dotenv file

const app = express();
const port = process.env.PORT || 5000;
//this is how we will create our express server 

app.use(cors());
app.use(express.json());
//this is our middle ware this will allopw us to parse json
// cause the server will be sending s=and receiving json

const uri = process.env.ATLAS_URI;
mongoose.connect(uri, {useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology:true});
//uri is where database is stored
const connection = mongoose.connection;
connection.once('open',() =>{
    console.log("MongoDB database connection established successfully");
});
//once connection is open its going to log the message

const exercisesRouter = require('./routes/excercises');
const usersRouter = require('./routes/users');
//importing 

app.use('/excercises',exercisesRouter);
app.use('/users',usersRouter);
//use files
//whenever somebody goes to route url and put /excersies at the end it will show
//everything in excercises and the same for users


app.listen(port,()=>{
    console.log('Server is running on port: ' + port);
});
//this is what starts the server. It start listening to a certain port

This is my submit function

onSubmit(e){
        e.preventDefault(); //prevents default html form behaviour taking place
        const user = {
            username: this.state.username,
        };

        console.log(user);

        //sending user data to the backend with post request
        //check user.js file in routes its sending a post request to the user.add api
        axios.post('https://localhost:5000/users/add',user)
            .then(res => console.log(res.data));

        this.setState({
            username: ''
        });
    }

This is my route

router.route('/add').post((req,res) => {
    const username = req.body.username;

    const newUser = new User({username});
    //using unsername to create new user

    newUser.save()
        .then(() => res.json('User added')) //after user saved to DB return user added message
        .catch(err => res.status(400).json('Error ' + err)); //if there is an error return error
});

• javascript
• node.js
• reactjs
• mongodb
• mongoose

• can you please console.log(req.body). – costal oktopus Commented Apr 26, 2020 at 12:38
• It not even getting into the post request – Chiddy Commented Apr 27, 2020 at 11:00
• ERR_CONNECTION_REFUSED indicates that there is nothing listening on that port. Check the config to make sure that is right port, check that the service is actually running, and check with netstat or similar that there is something listening on localhost:5000 – Joe Commented Apr 27, 2020 at 14:42

4 Answers 4

check if your backend is also running on port 5000 u need to start your backend

I followed this tutorial as well, you have to start the backend and the front end. The problem was the front end is only running that's why you can see everything( not sure how he managed ) but I had to pull up a terminal and start the front end with -> npm start and the backend with -> nodemon server on a separate terminal tab

bro, I think you did just a little mistake in your address which is https://localhost:5000/users/add not https change it to http and it will solve your problem your address will be http://localhost:5000/users/add

I got stuck into the same error, what worked on mine was in api.js backend server url had a typo. So a tip i got about the error that will be helpful to everyone is that the error is because of client to server conenction, in the project client side at port http://localhost:3000/ should be able to connect correctly to backend server running at http://localhost:5000/posts. Good Luck.