avatarBryant Jimin Son

Summary

The web content describes solutions to the "Proxy error: Could not proxy request xxx from yyy" when a local ReactJS app is trying to communicate with a local NodeJS app, specifically addressing issues related to proxy configuration and potential IP version mismatches.

Abstract

When developing a ReactJS application that communicates with a NodeJS backend locally, a common issue encountered is the "Proxy error: Could not proxy request" error. This error occurs when the ReactJS development server, running on port 3000, attempts to proxy requests to the NodeJS server on port 8000. The article explains that adding "secure: false" to the proxy settings in the ReactJS application's package.json can resolve the issue by altering the webpack dev server configuration. If this does not fix the problem, another potential issue could be that the NodeJS server is listening on the IPv6 address (::1), while the proxy is connecting to the IPv4 address (127.0.0.1). The solution in this case is to explicitly set the proxy to use the IPv4 address in the package.json. The article references webpack's documentation for further understanding of the dev server's proxy settings and alludes to a similar problem encountered with MongoDB connection errors in NodeJS.

Opinions

  • The author suggests that modifying the package.json with "secure: false" is an effective solution for the proxy error.
  • There is an implication that developers should be aware of the underlying IP version differences between local servers and their impact on proxy configurations.
  • The author provides a direct and practical approach to troubleshooting common proxy errors in a local development environment.
  • By referencing external resources, the author acknowledges the broader context of the issue and encourages readers to seek additional information for a deeper understanding.

Solving “Proxy error: Could not proxy request xxx from yyy” from local ReactJS app to NodeJS app

How to fix “Proxy error: Could not proxy request xxx from yyy” in local NodeJS app

So, while I am calling from a ReactJS app, listening on port 3000, locally to also locally running NodeJS app, listening on port 8000, I was using the proxy parameter in package.json in ReactJS. But I was getting the following error.

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

Proxy error: Could not proxy request from localhost:3000 to localhost:8000

To resolve this, one has to add “secure: false” in package.json defined in ReactJS and restart again.

Add secure: false in ReactJS app

The reason for the solution has to with the webpack configuration. See:

However, let’s say the solution above did not solve the problem. What is the issue? Another possible issue is that the server is listening on ipv6 ::1 address while the proxy is connecting to ipv4 127.0.0. Thus, the solution is to change the localhost to 127.0.0.1 in package.json like the following.

Changing the port to 127.0.0.1

This is similar to the problem I encountered in other blog I posted:

Reference:

Reactjs
Nodejs
Proxy
Web App Development
Frontend
Recommended from ReadMedium