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

---

Edit: @mkoe said that he was able to solve this issue simply by deleting the package-lock.json file, and restarting the app, so give that a try first. If that doesn't resolve it, then 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.

Answer 2

The reason the react application is still pointing at localhost:8080 is because of cache. To clear it , follow the steps below.

1. Delete package-lock.json and node_modules in React app
2. Turn off React Terminal and npm install all dependencies again on React App
3. Turn back on React App and the proxy should now be working

This problem has been haunting me for a long time; but if you follow the steps above it should get your React application pointing at the server correctly.