"React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:5000 (ECONNREFUSED)'? Error.. No solution online

Question

I am trying to connect my react frontend to the backend i tried everything but its still not working. I added "proxy" : "localhost:5000" and no luck. I tried

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

module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:5000',
            changeOrigin: true,
        })
    );
};

and also no luck. Has anyone found a solution to the problem. I looked all over stackoverflow

UPDATE : Index file

// Imports 
const express = require('express')
const app = express();
const cors = require('cors')
const mongoose = require('mongoose');
const bodyParser = require('body-parser')
const cookieParser = require('cookie-parser')
const config = require('./config/key')
const routes = require('./routes/api')
require('dotenv').config()
// -----Connect to the database
mongoose.connect(config.mongoURI,
    {useNewUrlParser: true,useUnifiedTopology:true,
    createIndexes : true}).then(()=>{
    console.log("Database connected")
}).catch((error)=>{
    console.log(error)
})

// ----setting up middleware 
const corsOptions = {
    origin:['http://localhost:3000'],
    credentials: true,
    optionsSuccessStatus: 200
}
app.use(cors(corsOptions))
app.use(bodyParser.urlencoded({extended : true}))
app.use(bodyParser.json())
app.use(cookieParser())
app.use('/api', routes);


// ---- Setting up server to listen on port 5000
app.listen(5000,()=>{
    console.log("App is running on 5000")
})

@onuriltan what do u mean by the index? its not letting me put the whole file in here so i will update my post. — Adil Khan
try removing changeOrigin from createProxyMiddleware or give corsOptions origin as string — onuriltan
@onuriltan i am getting this now Response {type: "basic", url: "http://localhost:3000/movies/api/favorites", redirected: false, status: 500, ok: false, …} — Adil Khan

Mohammad Zuha Khalid Mohammad Zuha Khalid · Accepted Answer · 2020-07-24T10:05:10

Update your code to this

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

module.exports = function (app) {
 
  app.use(
    createProxyMiddleware("/api/*", { target: "http://localhost:5000/" })
  );
};

"React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:5000 (ECONNREFUSED)'? Error.. No solution online

2 Answers