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?

Harshit Hiremath · Accepted Answer · 2022-04-27T20:37:08.410

71

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.

edited Apr 27 '22 at 20:37

answered Sep 01 '20 at 14:51

Harshit Hiremath

867
7
6

15

Actually just deleting package-lock.json and restarting worked for me, so you may want to try this first before reinstalling node_modules. – mkoe Apr 16 '21 at 10:37
You've nailed it! If you're using create-react-app this should be the accept answer. Thank you – newLoop Jun 17 '21 at 12:22
After stopping the React app the following worked for me. 1. delete package-lock.json 2. npm i --package-lock-only # recreates package-lock – enjoi4life411 Jul 08 '21 at 01:59
I deleted package-lock.json and restarted npm start and package-lock.json was never recreated. I did npm i --package-lock-only and it recreated the package-lock but package-lock still doesn't show any reference to proxy as I have in package.json – jdog Jul 14 '21 at 07:05
Thank you Very Much, this solved the issue – Shreyas Sarvothama Nov 03 '21 at 10:57
2

This did not work for me. Week 3 still have the same problem. – Hashem Mashem Feb 19 '22 at 14:20
bro thank you so much, i thought i was going crazy – artSir Jan 08 '23 at 03:48
This worked me for me. – Mike En Aug 31 '23 at 23:08

score 17 · Answer 2 · answered Apr 23 '20 at 04:56

17

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.

answered Apr 23 '20 at 04:56

ousecTic

1,895
11
20

well that wasted several minutes of my time not realizing that it was cached. Should have realized. Have had similar issues on web servers before, but I forgot – James Joshua Street Aug 03 '22 at 21:36

score 14 · Answer 3 · answered May 23 '20 at 11:57

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.

Make sure you check the url. It should start with a `/` . If you're on a page `localhost/user`, then without the first slash `fetch('api/hello')` will resolve to `localhost/user/api/hello`, where it was meant to go to `localhost/api/hello` — MathKid, Sep 11 '21 at 00:53

score 9 · Answer 4 · answered Dec 04 '22 at 20:09

I was having this issue for hours, and I'm sure some of the things above could be the cause in some other cases. However, in my case, I am using Vite and I had been trying to add my proxy to the package.json file, whereas it should be added to the vite.config.js file. You can click here to read about it in Vite's docs.

In the end, my code looks like this:

export default defineConfig({
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8000",
        secure: false,
      },
    },
  },
  plugins: [react()],
});

+1. For react-admin, I've used the /api config as is from https://vitejs.dev/config/server-options.html#server-proxy and set VITE_SIMPLE_REST_URL=http://localhost:5173/api in the .env file. — mmavcy, Jul 05 '23 at 07:42

score 6 · Answer 5 · answered Jan 17 '18 at 00:44

6

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.

answered Jan 17 '18 at 00:44

casieber

7,264
2
20
34

62

I get that, but shouldn't the proxy take care of that? What's the purpose in having it there if it isnt? – Strahinja Ajvaz Jan 17 '18 at 00:47
5

What exactly are you thinking will make use of the "proxy" value you have set there? Your scripts lead me to believe that you're using webpack-dev-server for developement, but it won't pick up a `proxy` setting from package.json. It uses your webpack config for any `proxy` setting, as seen in the documentation [here](https://webpack.js.org/configuration/dev-server/#devserver-proxy) – casieber Jan 17 '18 at 01:13

score 6 · Answer 6 · answered Oct 06 '20 at 04:30

6

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.

answered Oct 06 '20 at 04:30

Dave Albert

1,429
15
21

1

After trying multiple solutions, finally this is worked. – M_abosalem Apr 06 '21 at 17:10

score 5 · Answer 7 · answered Jun 20 '19 at 05:33

5

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

answered Jun 20 '19 at 05:33

Kittichote Chain

596
1
10
22

score 4 · Answer 8 · answered Feb 05 '21 at 18:43

4

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

answered Feb 05 '21 at 18:43

Leslie Nyahwa

107
1
9

You are a god. If you are using `webpack-dev-server` for your development environment, adding the proxy in the `webpack.config.js` file as described in the linked documentation will solve it! Thanks! – Ke Ke Feb 28 '23 at 02:16
Wow. This helped me out as well. I am running my react client with webpack-dev-server on http://localhost:3000 I set proxy in dev-server to point to node.js server which is running on http://localhost:3001 and it just worked! Thank you so much. – Yordani Bonilla Jul 09 '23 at 11:23

score 2 · Answer 9 · answered Oct 21 '20 at 21:57

2

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/'))

answered Oct 21 '20 at 21:57

yaya

7,675
1
39
38

Anwar Hossain · Answer 10 · 2021-08-28T18:07:21.783

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.

score 1 · Answer 11 · answered Jul 22 '20 at 22:53

1

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.

answered Jul 22 '20 at 22:53

Saurav Panthee

589
5
8

yeah, just change it on the package.json file. Using that script messed up by proxy I think. – Saurav Panthee Jul 29 '20 at 00:48

score 1 · Answer 12 · answered Nov 18 '20 at 02:59

1

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.

answered Nov 18 '20 at 02:59

Yohan W. Dunon

502
10
18

score 1 · Answer 13 · answered May 10 '21 at 07:28

1

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.

answered May 10 '21 at 07:28

Gmerlene

31
3

score 1 · Answer 14 · answered Jun 19 '21 at 06:29

1

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

answered Jun 19 '21 at 06:29

MUNISH KUMAR

29
2

it's an opinion not answer. can you be specific? – Lakshman Kambam Jun 19 '21 at 12:21
its a way to communicat with your backend api otherwise when you deploye your application on server then you will face 404 not found error if you used proxy for base uri of backend. – MUNISH KUMAR Jun 20 '21 at 13:16
yeah, be specific that way you responded to me with more details in your answer. – Lakshman Kambam Jun 21 '21 at 11:41

score 1 · Answer 15 · answered Jun 24 '21 at 08:37

1

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

answered Jun 24 '21 at 08:37

shahzad mujtaba

11
1

score 1 · Answer 16 · answered Mar 03 '22 at 23:23

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.)

score 1 · Answer 17 · answered Jun 12 '22 at 15:54

In my specific case, I had a both Node backend, and an inner folder with a React project. I tried @Harshit's answer, which didn't work, until I had two package.json files in my project, one in the outer folder, and one in my client (React) folder. I needed to set up the proxy in the inner package.json, and I needed to clear the cache in the inner folder.

score 0 · Answer 18 · answered Jan 23 '22 at 15:03

0

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}` }
));`

answered Jan 23 '22 at 15:03

Viktor

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 23 '22 at 17:52

score 0 · Answer 19 · answered Jul 08 '22 at 20:05

0

For me, I solved this by just stopping both the servers i.e. frontend and backend, and restarting them back again.

answered Jul 08 '22 at 20:05

Priya Ranjan

1
1

score 0 · Answer 20 · answered Jul 19 '22 at 08:17

Here is an opinion Don't use proxies, use fetch directly

not working

fetch("/signup", {    
        method:"post", 
        headers:{
            "Content-Type":"application/json" 
        },
        body:JSON.stringify(
        {
            name:"",
            email:"",
            password:"",
        }
        )

Actually worked after wasting 6hours

fetch("http://localhost:5000/signup", {    //    https -> http
        // fetch("/signup", {    
        method:"post", 
        headers:{
            "Content-Type":"application/json"              },
        body:JSON.stringify(
        {
            name:"",
            email:"",
            password:"",
        }
        )

This will result in CORS error – Dattatreya Kugve Jun 24 '23 at 13:14 — Dattatreya Kugve, Jun 24 '23 at 13:14

score 0 · Answer 21 · answered Oct 23 '22 at 11:43

In my case the problem was that the proxy suddenly stopped to work.

after investigating I found that I've moved the setupProxy from the src folder and that cause the problem.

Moving it back to the src folder have solved the problem.

The problematic structure:

The solution:

score 0 · Answer 22 · answered Oct 26 '22 at 04:40

0

faced similar issue. my proxy was not connecting restarting the react app fixed my issue

answered Oct 26 '22 at 04:40

Krishnadev. V

345
2
8
23

score 0 · Answer 23 · answered Nov 23 '22 at 12:24

0

In my case it was because of typo. I wrote "Content-type": "application/json", (with small t) instead of "Content-Type": "application/json",

answered Nov 23 '22 at 12:24

Myo Win

483
1
6
17

score 0 · Answer 24 · answered Dec 15 '22 at 20:17

0

you should install this package:

npm install http-proxy-middleware --save

refrense: this link

answered Dec 15 '22 at 20:17

Mohammad Nazari

137
1
12

score -5 · Answer 25 · answered Dec 05 '20 at 17:47

-5

Make sure your end point match with the backend.

answered Dec 05 '20 at 17:47

Vikram

3

proxy not working for react and node

25 Answers25

Linked