proxy not working for react and node

Question

I'm having issues with the proxy I set up.

This is my root package.json file:

"scripts": {
    "client": "cd client && yarn dev-server",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
}

My client package.json file:

"scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "dev-server": "webpack-dev-server"
},
"proxy": "http://localhost:5000/"

I've set up express on my server side to run on port 5000. Whenever I make a request to the server, ie :

callApi = async () => {
    const response = await fetch('/api/hello');
    const body = await response.json();
    // ... more stuff
}

The request always goes to

Can someone point out what i have to do to fix this issue so that the request actually goes to port 5000?

Answer 1

I experienced this issue quite a lot of times, and I figured it's because of the cache. To solve the issue, do the following

1. Stop your React app
2. Delete package-lock.json file and the node_modules directory by doing
   rm -r package-lock.json node_modules
   in the app directory.
3. Then do npm install in the app directory.

Now your proxy in the package.json will not have any issues.