Proxy error: Could not proxy request /api/house-listing from localhost:3000 to http://localhost:5000? (ECONNRESET), MERN

Question

In my MERN application when trying to make an axios request on the client side I get the proxy error: error: Could not proxy request /api/house-listing from localhost:3000 to http://localhost:5000 I've tried change the scripts in my package.json on the backend and ensuring that all the routes work but, I'm still getting the error?

Backend package.json

{
  "name": "real-estate-app",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "dev": "concurrently \"nodemon server.js\" \"cd client && npm start\"",
    "start": "node server.js",
    "postinstall": "cd client && npm i && npm run build"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cloudinary": "^1.23.0",
    "concurrently": "^5.3.0",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "formidable": "^1.2.2",
    "mongoose": "^5.11.13",
    "nodemon": "^2.0.7"
  },
  "devDependencies": {
    "dotenv": "^8.2.0"
  }
}

backend Route

// const express = require('express')
// const router = express.Router()
const router = require('express').Router();
const {House} = require('../../Models/House');
const Formidable = require('formidable');
const cloudinary = require('cloudinary').v2
const mongoose = require('mongoose');
require("dotenv").config()
// const { request, response } = require('express');
// const dotenv = require("dotenv");


// dotenv.config();


//mongoDB and Cloudinary

const mongoURI = process.env.Mongo_URI;

cloudinary.config({
    cloud_name: process.env.CLOUD_NAME,
    api_key: process.env.API_KEY,
    api_secret: process.env.API_SECRET
})


mongoose.connect(mongoURI, {useNewUrlParser:true, useUnifiedTopology:true}, (error)=>{
    if(error) {
        return console.log(error)
    }
    return console.log("database is connected")
})

router.post("/api/house-listing", async (request, response)=>{
    const form = new Formidable.IncomingForm();

    form.parse(request, (error, fields, files)=>{
        const {
            price,
            city,
            county,
            numOfBeds,
            numOfBaths,
            numOfGarages,
            isSaleOrRent,
        } = fields

        const { house_image } = files;

        console.log('Price: ', price)
        console.log('City: ', city)
        console.log('county: ', county)
        console.log('numOfGarages: ', numOfGarages)
        console.log('numOfBeds: ', numOfBeds)
        console.log('numOfBaths: ', numOfBaths)
      
        console.log('isSaleOrRent: ', isSaleOrRent)
        console.log('houseImage', house_image.path)

        cloudinary.uploader.upload( house_image.path, 
            {folder:"/houseAgency/houses"}, async(error, result)=>{
            if(error) {
                console.log(error)
            }
            const image_url = result.url;

            const newHouse = new House({
                house_location: {
                    
                    county: county,
                    city: city,

                },

                house_details: {
                    price: price,
                    numOfBeds: numOfBeds,
                    numOfBaths: numOfBaths,
                    numOfGarages: numOfGarages,
                    isSaleOrRent: isSaleOrRent,
                    house_image: image_url,
                }
            })
            const savedHouse = await newHouse.save();
            return response.status(200).json(savedHouse)
        })
    })
})



module.exports = router;

client package.json

  "name": "client",
  "version": "0.1.0",
  "private": true,
  
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.1",
    "react": "^17.0.1",
    "react-device-detect": "^1.15.0",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "proxy": "http://localhost:5000",

Answer 1

You can add setupProxy.js in core of your react app

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(createProxyMiddleware('/api', { target: 'http://[::1]:5000/' }));
    app.use(createProxyMiddleware('/public', { target: 'http://[::1]:5000/' }));
  }
};