[Django]-React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED)

I faced a similar issue but in Mac machine. I changed localhost to 127.0.0.1 in the package.json and that worked for me as below:

"proxy": "http://127.0.0.1:5000"

I’m running into the same problem as well. Most search results mention adding "secure": false or "ignorePath": true to your proxy config. Something like this:

"proxy": {
    "/api/*":  {
      "target": "http://localhost:8000",
      "secure": false
    }
  },

May be worth a try but unfortunately none of this worked for me. Although each address (http://localhost:3000 and http://localhost:8000) work completely fine in the browser, maybe since the container is actually proxying it needs to use a Docker address?

EDIT–

Alright I think I figured it out. I believe it did have to do with the container to container communication. Looking in your docker-compose, your api server is called django. Change your package.json file to this:

"proxy": {
    "/api/*":  {
      "target": "http://django:8000",
      "secure": false
    }
  }

Didn’t actually get the answer here I was looking for but had an alternative solution work for me. I think it’s specifically related to Node v17, as that’s when it started happening for me but the solution was pretty simple.

I updated:

"proxy": "http://localhost:8000"

To:

"proxy": "http://127.0.0.1:8000"

In case it’s relevant (I don’t think it is) – I was proxying to a Django server.

If you don’t feel like setting up docker compose, you can also use a docker network:

create network and run docker containers within that network

docker network create webapp_network

docker run -d -p 5000:5000 --name webapp_backend --network webapp_network webapp_backend_image

docker run -d -p 3000:3000 --name webapp_frontend --network webapp_network webapp_frontend_image

Added a line in package.json of my frontend React webapp:

"proxy": "http://webapp_backend:5000"

note you can now refer to your backend using the container name instead of localhost

If your on a newer version CRA 2.0+ you’ll need to do this via a manual proxy.
https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development#configuring-the-proxy-manually

Could see the error after upgrading yesterday Docker to version v19.03.13 (on Mac), restarting Docker fixed the issue. The application also runs Node.js/React, but not Django. Basically, I had issues with connection to MongoDB Atlas related to authentication/fetching anything from the cloud database.

Choosing the exact value for localhost to populate the "target" property is mostly the solution (it can be localhost, 127.0.0.1, [::1] ).

A mac user should type in terminal to get the solution:

sudo lsof -iTCP -sTCP:LISTEN -n -P

The correct answer will be to use manual proxy with

1. target = docker address django:4000
2. correct HOST header localhost:8000

because if Django uses reverse function which returns absolute url

reverse('preview-mail', args=[mail.pk],request=request)

you need to have correct HOST header for it, or you may get the result URL like
https://django:4000/your-url`

const proxy = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    proxy('/api', {
      target: 'http://django:4000',
      changeOrigin: true,
      secure: false,
      pathRewrite: {
        '^/api': ''
      },
      onProxyReq: function (proxyReq, req, res) {
          proxyReq.setHeader("host", 'localhost:8000')
      }
    })
  )
}

If you’re working on a MERN stack app, make sure you’re not in the client folder. You need to be in the root. While in the root, run this command in the terminal. npm run start:dev

For NodeJs backend this can be solved by adding a line of code in the package.json file of the backend

"devstart": "nodemon server.js --ignore './location of frontend react directory'",

I ran into this problem when I changed the webserver address.
At first I had a localhost, and everything worked fine. In order for me to access my web server from other machines, I changed its address to 0.0.0.0 after that I got this problem. It helped me to change the proxy settings from localhost to 127.0.0.1

I had this same issue. my resolution was changing http://localhost:8000 to http://127.0.0.1:8000

In my case, my server was running on port 3001, but I had "proxy": "http://localhost:3000" in the package.json file of my React fronted project