Keep getting "Proxy error: Could not proxy request" error after adding proxy to react package.json

Question

I am following this basic guide to set up a local dev environment with both react and node running. I am stuck after adding a "proxy": "http://localhost:4001" statement to the package.json of the react directory. It keeps saying: Proxy error: Could not proxy request /flower from localhost:51427 to http://localhost:4001.

Environment: There's no authentication involved. It is just a boilerplate node.js and create-react-app setup. The create-react-app version is 3.0.1. I am using a Mac.

I tried the following way to figure this problem out:

1. I verified that the server is running correctly and localhost:4001 does provide data back.
2. I checked the browser dev tool and see the error is GET http://localhost:51427/flower 500 (Internal Server Error)
3. I also added a "--ignore client" in the server's package.json
4. I also tried installing http-proxy-middleware per this instruction: https://create-react-app.dev/docs/proxying-api-requests-in-development/.

Here's the package json for react:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "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://localhost:4001"
}

The localhost page of react is blank instead of having text. The console log also confirms no data is received.

Answer 1

After countless searches, I figured out the problem and got it working!!!

First, since the proxy error was showing up when I ran the npm command on react, I figured that the proxy statement in my package.json was working. Since I could also reach the server through localhost:4001, the problem must be that the react server somehow couldn't find the node.js server, i.e. not in the same channel of communication etc.

I then searched and found the issue has to do with them not running concurrently (I also considered other possibility like one running on ipv4 vs the other one running on ipv6 but this one seems to be the most likely solution). This answer helped me figure out how to make it happen: Could not proxy request /pusher/auth from localhost:3000 to http://localhost:5000 (ECONNREFUSED).

But then the concurrent request would fail because when it tried to run the client, it would fail because a port would always be clogged. For example when i run "npm start --prefix client", even if I changed the port in package.json, it would always report "something running on port XXX". I then figured out the issue has to do not having the right config set up for my localhost and this answer helped me out: npm start reports "Something is already running on port XXX" no matter what XXX is.

Now with concurrently, it is finally working.