ReactProxy error:Could not proxy request /api from localhost:3000 to http://192.168.0.8:4000. Before it was ECONNREFUSED after few tries --> ETIMEDOUT

Question

I'm doing e-com project in react. But suddenly after some-time when started npm start in react it throws me an error like

Proxy error: Could not proxy request /api/v1/products?keyword=&page=1&price[gte]=0&price[lte]=25000&ratings[gte]=0 from localhost:3000 to http://192.168.0.8:4000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ETIMEDOUT).

Proxy error: Could not proxy request /Roboto-Regular.ttf from localhost:3000 to http://192.168.0.8:4000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ETIMEDOUT).

Proxy error: Could not proxy request /api/v1/me from localhost:3000 to http://192.168.0.8:4000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ETIMEDOUT).

My package.json of react

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.61",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "overlay-navbar": "^1.2.3",
    "react": "^18.2.0",
    "react-alert": "^7.0.3",
    "react-alert-template-basic": "^1.0.2",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.4.0",
    "react-js-pagination": "^3.0.3",
    "react-material-ui-carousel": "^2.3.11",
    "react-rating-stars-component": "^2.2.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^4.0.3",
    "react-toastify": "^9.0.3",
    "redux": "^4.2.0",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.1",
    "web-vitals": "^2.1.4",
    "webfontloader": "^1.6.28"
  },
  "scripts": {
    "start": "react-scripts start ",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://192.168.0.8:4000"
}

My package.json of backend(server)

{
  "name": "e-com",
  "version": "1.0.0",
  "description": "",
  "main": "backend/server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node backend/server.js",
    "dev": "nodemon backend/server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.20.0",
    "cloudinary": "^1.30.1",
    "cookie-parser": "^1.4.6",
    "dotenv": "^16.0.1",
    "express": "^4.18.1",
    "express-fileupload": "^1.4.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.5.2",
    "nodemailer": "^6.7.8",
    "nodemon": "^2.0.19",
    "validator": "^13.7.0"
  }
}

I tried several answers from stack-overflow like adding (a slash) "proxy": "http://192.168.0.8:4000/", killing the tasks of node server in the task manager. Restarting the system again. Nothing worked! All it changed to ECONNREFUSED --> ETIMEDOUT Any help, please!

yeshwanth yadav kondra · Accepted Answer · 2022-08-29 18:34:58Z

2

After a lot of countless searches. I forgot that, Ip address which I had given in the react package.json wasn't dynamic one. I'm finally able to do it. I just change my proxy to "proxy": "http://localhost:4000"

answered Aug 29, 2022 at 18:34

yeshwanth yadav kondra

391 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Qasim Ameer · Accepted Answer · 2023-08-09 04:21:26Z

0

Only when saving a file in the client folder, both create-react-app's auto-reload and nodemon's auto-reload kick in. I believe this is creating a race-condition for the proxy at the frontend as both servers are temporarily down when restarting. If nodemon restart first then proxy works. If not, componentDidMount and fetchUser in App dispatch the action too earlier... Which is why sometimes it works, sometimes it crashes.

answered Aug 9, 2023 at 4:21

Qasim Ameer

111 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Holeey · Accepted Answer · 2024-01-20 22:04:13Z

-1

Try placing your proxy before the private object like this: "name": "frontend", "version": "0.1.0", "proxy": "http://localhost:5000", "private": "false",

answered Jan 20, 2024 at 22:04

Holeey

1

1 Comment

Itay Wolfish Over a year ago

Hello @Holeey , Could you provide more details why the solution of switching between the order of the two keys will solve the problem?

Collectives™ on Stack Overflow

ReactProxy error:Could not proxy request /api from localhost:3000 to http://192.168.0.8:4000. Before it was ECONNREFUSED after few tries --> ETIMEDOUT

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related