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?
Using a manually created proxy in Create React App Ensure you don't have proxy defined in the package. json file, then create a new file named setupProxy. js in the src directory. Add the following code snippet to the setupProxy.
In general, A proxy or proxy server serves as a gateway between your app and the internet. It's an intermediate server between client and servers by forwarding client requests to resources. In React, we often use this proxying in the development environment.
Both React and Node JS happen to have different functions in the web development process, but can be used together to reap multiple benefits. The only experience a developer needs to use both these technologies is that of using NPM.
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.
rm -r package-lock.json node_modules
npm install
in the app directory.Now your proxy in the package.json will not have any issues.
The reason the react application is still pointing at localhost:8080 is because of cache. To clear it , follow the steps below.
- Delete
package-lock.json
andnode_modules
in React app- Turn off React Terminal and
npm install
all dependencies again on React App- 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With