'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

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

Solution 1:^[1]

I experienced this issue quite a few 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.

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

Hopefully this fixed your proxy issue.

Solution 2:^[2]

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 and node_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.

Solution 3:^[3]

This is how I achieved the proxy calls.

Do not rely on the browser's network tab. Put consoles in your server controllers to really check whether the call is being made or not. For me I was able to see logs at the server-side. My node server is running on 5000 and client is running on 3000.

Network tab -

Server logs -

Check if your server is really running on the same path /api/hello through postman or browser. For me it was /api/user/register and I was trying to hit /api/user
Use cors package to disable cross-origin access issues.

Solution 4:^[4]

Is your client being loaded from http://localhost:8080?

By default the fetch api, when used without an absolute URL, will mirror the host of the client page (that is, the hostname and port). So calling fetch('/api/hello'); from a page running at http://localhost:8080 will cause the fetch api to infer that you want the request to be made to the absolute url of http://localhost:8080/api/hello.

You will need to specify an absolute URL if you want to change the port like that. In your case that would be fetch('http://localhost:5000/api/hello');, although you probably want to dynamically build it since eventually you won't be running on localhost for production.

Solution 5:^[5]

For me "proxy" = "http://localhost:5000 did not work because I was listening on 0.0.0.0 changing it to "proxy" = "http://0.0.0.0:5000 did work.

Solution 6:^[6]

Make sure you put it on package.json in client side (react) instead of on package.json in server-side(node).

Solution 7:^[7]

I have tried to solve this problem by using so many solutions but nothing worked for me. After a lot of research, I have found this solution which is given below that solved my proxy issues and helped me to connect my frontend with my node server. Those steps are,

killed all the terminals so that I can stop frontend and backend servers both.
Installed Cors on My Node server.js file.

npm install cors

And added these lines into server.js file

var cors = require('cors')

app.use(cors())

Into package.json file of frontend or client folder, I added this line,

"proxy" : "http://127.0.0.1:my_servers_port_address_"

Now everything working fine.

Solution 8:^[8]

Yours might not be the case but I was having a problem because my server was running on localhost 5500 while I proxied it to 5000.

I changed my package.json file to change that to 5500 and used this script:

npm config set proxy http://proxy.company.com:8080 npm config set https-proxy http://proxy.company.com:8080

I am pretty sure just changing it on the package.json worked but I just wanted to let you know what I did.

Solution 9:^[9]

you should set the proxy address to your backend server, not react client address.
you should restart the client after changing package.json
you should use fetch('/api/...') (instead of fetch('http://localhost:8080/api/'))

Solution 10:^[10]

Make sure you check your .env variables too if you use them. It's because of that if I was looking for a solution on that page.

Solution 11:^[11]

This solution worked for me, specially if you're using webpack.

Go to your webpack.config.js > devServer > add the below

proxy: { '/api': 'http://localhost:3000/', },

This should work out.

Read more about webpack devSever proxy: https://webpack.js.org/configuration/dev-server/#devserver-proxy

Solution 12:^[12]

I tried all the solutions, proposed here, but it didn't work. Then I found out, that I tried to fetch from root directory (i.e. fetch('/')) and it's not correct for some reason. Using fetch('/something') helped me.

Solution 13:^[13]

Your backend data or files and react build files should be inside the same server folder.

Solution 14:^[14]

you must give proxy after the name.{"name":"Project Name", "proxy":"http://localhost:5000"} port should match with your backend's port.

Solution 15:^[15]

My problem was actually the "localhost" part in the proxy route. My computer does not recognize "localhost", so I swapped it with http://127.0.0.1:<PORT_HERE> instead of http://localhost:<PORT_HERE>.

Something like this:

app.use('/', proxy(
    'http://localhost:3000', // replace this with 'http://127.0.0.1:3000'
    { proxyReqPathResolver: (req) => `http://localhost:3000${req.url}` }
));`

Solution 16:^[16]

If you are seeing your static react app HTML page being served rather than 404 for paths you want to proxy, see this related question and answer:

https://stackoverflow.com/a/51051360/345648

(This doesn't answer the original question, but searching Google for that question took me here so maybe this will help others like me.)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	ousecTic
Solution 3	sunny prakash
Solution 4	casieber
Solution 5	Dave Albert
Solution 6	Shane
Solution 7
Solution 8	Saurav Panthee
Solution 9	yaya
Solution 10	Yohan W. Dunon
Solution 11	Leslie Nyahwa
Solution 12	Gmerlene
Solution 13	MUNISH KUMAR
Solution 14	shahzad mujtaba
Solution 15	Viktor
Solution 16	Alexander Taylor

'proxy not working for react and node

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]