Maanu
Maanu

Reputation: 1085

Could not proxy request /pusher/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED)

I am trying to create a chat app using reactJS and pusher, i am getting this error-

Could not proxy request /pusher/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED)

in package.json file i have set proxy as-

"proxy": "http://localhost:5000"

and my localhost is defined as 127.0.0.1 in /etc/hosts file.
I have also checked for the port availability using netstat, but these all seems to be correct. Can anybody help?

Upvotes: 98

Views: 292201

Answers (27)

Mohab El-Sayed
Mohab El-Sayed

Reputation: 31

For WINDOWS 11 users with go lang as a backend, I actually changed the localhost to

"proxy": "http://127.0.0.1:4242/"

This worked for me hope it helps

Upvotes: 0

ulu
ulu

Reputation: 6092

It started working for me when I switched from Node 18 to 16.13.2

Upvotes: 0

daniel gi
daniel gi

Reputation: 436

It’s because node 18 uses ipv6 as default, and it have A LOT of different issues. The actual problem raised because the proxy server resolves localhost to ipv6 and your node server don't know who to handle it.

You can solved it by adding NODE_OPTIONS=\"--dns-result-order=ipv4first\" to your package.json start script as the following:

...

scripts: {
"start": "NODE_OPTIONS=\"--dns-result-order=ipv4first\" react-scripts start",
"build": "...."
}

...

Upvotes: 0

Mostafa Sabeghi
Mostafa Sabeghi

Reputation: 382

In my case i had started server with nodemon and it was not installed on my pc.After install nodemon,it worked :)

npm install -g nodemon # or using yarn: yarn global add nodemon

Upvotes: 1

KerryKilian
KerryKilian

Reputation: 95

For me proxy should go from http://localhost:3000 to https://localhost:3001 . I changed the second one from https to http, so that in my package.json file is written now:

"proxy": "http://localhost:3001", 

I am not sure if this is the correct solution as I am taking a more insecure protocol, but it worked for me.

Upvotes: 0

Dennis
Dennis

Reputation: 901

I had a same problem in my React App and I fixed it by just adding / after the port number in package.json file (so now it's: "proxy": http://localhost:5000/)

Upvotes: 73

Nahiduzzaman
Nahiduzzaman

Reputation: 171

If you are using axios, using proxy might not work sometimes. To fix that, we need to configure our axios before sending requests. axios has a create() method, which we can use to set the baseURL.

Create a new file http.js in your src folder:

import axios from "axios";

const http = axios.create({
  baseURL: "http://localhost:5000",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
});
export default http;

Now instead of importing from axios, use this:

import axios from "../../http";

Upvotes: 1

Joseph
Joseph

Reputation: 1536

I recently got this error when waiting for a response from my rest API function which does not return any.

so you either need to change the API implementation and send something back to the client or just don't wait for a response if you are not returning any.

Upvotes: 0

Ahmed Younes
Ahmed Younes

Reputation: 1134

In server directory

npm install --save http-proxy-middleware

then create a file with this name : setupProxy.js in src directory of client react folder

enter image description here

then add the following

enter image description here

const proxy = require("http-proxy-middleware");
module.exports = function(app) {
  app.use(proxy("/api/**", { // https://github.com/chimurai/http-proxy-middleware
    target: "http://localhost:5000",
    secure: false
  }));
};

In proxy configuration make sure you are matching any path with double ** not only *

Note: you are not going to require this proxy anywhere else just like that

Note: remove any other proxy settings in package.json For more check this reference

Upvotes: 15

Eliya Gervas
Eliya Gervas

Reputation: 87

In my case, I changed port number from 5000 to 7000, while reactjs was still fetching on localhost 5000, after I changed everything worked perfect

ReactJs FETCH HOOK:

    const { data, loading, error } = useFetch(
    "http://localhost:7000/api/hotels/countByCity?cities=Arusha,Dodoma,Mwanza,Dar-es-salaam"
  );

NodeJS server port:

const PORT = process.env.PORT || 7000;

Upvotes: -1

Ahmed Anwer
Ahmed Anwer

Reputation: 196

None of these answers were helping me despite everyone's effort. Finally, thankfully, I found this github discussion where someone said use node server.js to start the server. This WORKED. Before I was using nodemon server.js and npm start. I've no idea why those commands weren't able to connect to my proxy at http://127.0.0.1:5000 but node server.js could.

Cheers

Upvotes: 3

Ega
Ega

Reputation: 457

In your server package.json add --ignore client to your "start" or "server" scripts. So it would look like this:

 "scripts": {
 "start": "node index.js",
 "server": "nodemon index.js --ignore client"
 }

Upvotes: 22

Harshit Gangwar
Harshit Gangwar

Reputation: 553

This has something to do with default settings of create-react-app.

I found a solution from Github Issue. Read the response by danielmahon on 15 Mar 2018

"proxy": {
    "/api": {
      "target": "https://localhost:5002",
      "secure": false
    }
  },

Upvotes: 2

Piyush Chandra
Piyush Chandra

Reputation: 309

In package.json file just add "/" after the port number and it should work fine.

"proxy": "http://localhost:5000/"

Upvotes: 6

saqib diar
saqib diar

Reputation: 87

Proxy error: Could not proxy request /signup from localhost:3000 to http://localhost:8282/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

I got the same issue and I just solved it by only restart both of the server, you need to run both of the server running.

Thanks me ltr:)

Upvotes: 2

Devo
Devo

Reputation: 1124

For those who are using Docker, if your docker-compose.yml looks like:

services:
  app:
    ...
    depends_on:
      - api
    ports:
      - 3000:xxxx
    ...
  api:
    ...
    ports:
      - 5000:xxxx
    ...

Then we should set the proxy URL to

  "proxy": "http://host.docker.internal:5000"

Upvotes: 8

Mahmood Dehghan
Mahmood Dehghan

Reputation: 8265

Changing localhost to [::1] solved my problem.

Taken from here https://forum.vuejs.org/t/proxy-error-with-vue-config-js-and-axios/110632/4?u=mahmoodvcs

Upvotes: 2

Matiullah Mosazai
Matiullah Mosazai

Reputation: 61

if you are not using concurrently at your server side then simply run each front-end and back-end separately such that server side should run first and client side last.

Upvotes: 2

Geo Tech
Geo Tech

Reputation: 337

I think You have not start your Back end server. Try start both Back end and Front end server concurrently. Just simply run npm start in both back end and front end.

Upvotes: 18

dasisderblyme
dasisderblyme

Reputation: 1194

In my case the problem was that I have been accessing the PORT by the wrong name, i had it PORT instead of SERVER_PORT which was my correct environment variable name. So this problem means that there is a something wrong in your code, in my case the port on which the server should be running was undefined.

Upvotes: 1

Nkoro Joseph Ahamefula
Nkoro Joseph Ahamefula

Reputation: 530

In your node module include

{
...
  "proxy": "http://127.0.0.1:5000"
}

Where the ... simply means you should append the proxy ip to it.

Also, if you are using axios, doing axios.post('api/users') works and not axios.post('/api/users')

Upvotes: 7

user3152459
user3152459

Reputation: 403

My issue was trying to run my react project with docker containers open.

Change the ports or shut down the containers.

Upvotes: 1

Hrishikesh Baidya
Hrishikesh Baidya

Reputation: 567

Use "proxy":"http://localhost:PORT_NUMBER/" in package.json

and in axios backend call route like use axios.get("api/user/getinfo") instead of axios.get("/api/user/getinfo");

Upvotes: 3

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20118

I think Server not working properly, you should run client and server concurrently for that add following procedures in package.json file

1) Install concurrently

npm install concurrently --save

2) configure client and server

"server": "nodemon server.js",
"client": "npm start --prefix client"

3) configure concurrently

"dev": "concurrently "npm run server" "npm run client""

Upvotes: 2

Ankit Chaurasia
Ankit Chaurasia

Reputation: 865

I faced a similar issue but in Mac machine. I changed localhost to 127.0.0.1 and that worked for me.

For windows:

"proxy": {
  "/auth/google": {
    "target": "localhost:5000"
  }
}

For Mac:

"proxy": {
  "/auth/google": {
    "target": "http://127.0.0.1:5000"
  }
}

Upvotes: 43

Fantastory
Fantastory

Reputation: 1984

I have similar issue. The problem was that server was listening on ipv6 ::1 address and the proxy was connecting to ipv4 127.0.0.1

I changed both addresses from localhost to 127.0.0.1

Upvotes: 4

sherman.gore
sherman.gore

Reputation: 11

If you can't connect to localhost on port 5000 via telnet (you can download and use PuttY if you don't have telnet installed), then that means that server isn't running.

If you're using a Windows machine, go to your package.json for the server that is running on port 5000 and change this line:

"start": "./node_modules/.bin/concurrently \"./node_modules/.bin/nodemon\" \"npm run client\"",

To this:

"start": "./node_modules/.bin/concurrently \"npm run server\" \"npm run client\"",

Watch your build messages and you should see something similar to the following:

[0] 🌎  ==> API Server now listening on PORT 5000!
[1] Starting the development server...
[1]
[1] Compiled successfully!
[1]
[1] You can now view chat app in the browser.
[1]
[1]   Local:            http://localhost:3000/
[1]   On Your Network:  http://192.168.1.118:3000/
[1]
[1] Note that the development build is not optimized.
[1] To create a production build, use yarn build.

Upvotes: 1

Related Questions