Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

proxy not working for react and node

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

Picture of header pointing to http://localhost:8080/api/hello

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

like image 953
Strahinja Ajvaz Avatar asked Jan 17 '18 00:01

Strahinja Ajvaz


People also ask

How do I set up React proxy?

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.

How does proxy work in React?

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.

Can you use both React and node?

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.


2 Answers

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.

like image 180
Harshit Hiremath Avatar answered Oct 09 '22 08:10

Harshit Hiremath


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.

like image 24
ousecTic Avatar answered Oct 09 '22 10:10

ousecTic