Vite proxy error ECONNREFUSED does not change the browser request from pending.

[ogasawas216]

I have a question about server.proxy in vite.config.ts.
If there is no server process listening on the proxied port
Vite returns the following error in the console, but the browser request does not change from pending.

For Create React App's http-proxy-middleware, it returns a 504 error.
Is this behavior normal for Vite?

I would like to resolve this issue in order to change from CRA to Vite. Please reply.

console

ERROR 0:20:38 [vite] http proxy error: 00:20:38
Error: connect ECONNREFUSED xxx.xxx.xxx.xxx:9008
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1157:16) (x4)

browser network

When a proxy error ECONNREFUSED occurs, it does not change from penging.
Setting proxy.timeout changes it to FAILED, but what is expected is a 504 error

vite.config.ts

server: {
  proxy: {
    '/foo': {
      target: http://xxx.xxx.xxx.xxx:9008,
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/foo/, ''),
    },
  },
},

Version of service used

Node.js: v16.14.2
npm: 8.5.0
vite: ^2.9.0
react: ^17.0.2

[intgr]

I'm also experiencing this, IMO this is a bug in Vite, or at least surprising behavior.

If the proxy request to an upstream server fails, Vite should also return an error response back to the browser, not leave a hanging request.

[kartikeyarai7]

Any package that could be used for proxying? Just started using Vite and I think I should be going back to CRA

[Dezzymei]

Ditto! There has to be a better solution if the server is not down? (i.e. I'm restarting it)

[saqibganaie]

The bug is due to the Node version. I was facing the same issue while working with node:18.16.0 but my issue was resolved when I upgraded to node:20.12.2.

[wenq1]

Also #8117

[RichardTMiles]

We might see if this is os related #bump
https://stackoverflow.com/questions/65699157/proxy-issue-enotfound-create-react-app-http-proxy-middleware-express

[RichardTMiles]

netlify/create-react-app-lambda#19

[leonardoraele]

It happened to me as well, with Node v18.4.0. I figured it works correctly on Node v16.15.0, so that's the workaround I'm going with until Vite (and/or http-proxy) fixes it.

[liteCarma]

It happened to me as well, with Node v18.4.0. I figured it works correctly on Node v16.15.0, so that's the workaround I'm going with until Vite (and/or http-proxy) fixes it.

Thank you, it helped me too!

[gagbo]

This post needs to be marked as answer or something. I was pulling my hair out and would never have thought of changing Node version on my own.

[sapphi-red]

May I ask you to try 3.0.0 with Node 18.4.0? #7398 might fixed this.

[leonardoraele]

I tried 3.0.3 with node 18.6.0 and I'm still getting an ECONNREFUSED error that I don't get with node 16.15.0, but now the browser gets a http 500 response instead of pending infinitely. It is possible the ECONNREFUSED is an issue with my upstream server, though. (firebase cloud functions emulator v11.2.1) Can anyone else confirm the issue is fixed?

[kashifmurtaza72]

I am facing this same error.

[sapphi-red]

I think #7398 (included in 3.0.0+) fixed this.

[Punie]

Oh I think I found the issue!
Starting with node 17, localhost resolution favors ipv6 addresses, so for me, serving my local dev server from ::1:<PORT> fixed it.

[pjf1822]

can you explain this to me i understand what is ::1

[MoroHicham]

@sapphi-red can you please provide a clear answer for the case , we still not understand the answer above as you mark the question "answred" !

[sapphi-red]

The problem with the OP is that the request never ended. The PR I linked fixed that problem.
I don't know what question you want me to answer. But at least, the error message itself can happen by many causes and I cannot say what is wrong.

[rocifier]

it didn't fix it for me, we're up to 3.3 now and I still get repeated 500 errors and have to reload the browser at least 3 times to get them to all go away and for my app to load via vite hmr

[n-buck]

I use vite@2.9.15
Specifing host: 'localhost' in the vite-config fixed it for me.

[Nayar]

Thanks mate. i changed target: "http://localhost:8000/" to target: "http://127.0.0.1:8000/".

Awesome

[lwmonster]

This works for me, but I don't know WHY...

[rocifier]

didn't work for me;

GET https://localhost:5001/src/assets/images/brand-logos/light/Stuff%20Fibre.png?import net::ERR_ABORTED 500 (Internal Server Error)
...
etc.

[PawanAP30]

im having the same issue with node 16.14.2 and vite. I'm using shopify, with npm shopify init@latest and nothing works

[Hasan-al-Mashruf]

same issue. did you get solution

[diegovogel]

@Hasan-al-Mashruf the issue for me and others was that localhost wasn't resolving to 127.0.0.1. Did you try using the IP address for the proxy target? Here are some related comments: comment 1, comment 2.

[rherwig]

We are also experiencing this issue using Vite 4.2.0 and Node 18.14.2 (LTS). But not on regular requests, but on EventStreams only.
We use an Express endpoint to serve an event stream, consuming it with a Vite app that uses a proxy to redirect traffic to said Express server.

When terminating the Express server, the EventStream cuts off when connecting without a proxy. Using the proxy, the Vite console shows a proxy error:

[vite] http proxy error at /events:
Error: read ECONNRESET
    at TCP.onStreamRead (node:internal/stream_base_commons:217:20)

The HTTP Request as seen in the DevTools is not erroring or terminating as it did, when the proxy was not used.

[DharmPatel4300]

Have solve this bro?

[larscom]

Node16 worked with 'localhost', switching to Node17+ fails with 'localhost'.

Fix
Instead of 'localhost' use the IPV4 address as the target, e.g:

  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8080'
      }
    }
  }

[diegovogel]

This worked, thanks!

[rocifier]

didn't work for me, I tried http and https, still 500 errors on node 18.18

[baughmann]

This is still broken (at least with localhost on Node 18.18. After switching to Node 20, everything is fine...

[rocifier]

Interesting, I'm on 18.18. So do I need to upgrade node??

[rocifier]

Still broken in 20.11.1. After a slow load has finished:

[yejimeiming]

{
  server: {
+     host: '0.0.0.0',
  },
}

[rocifier]

This one didn't work either, errors eg.
GET https://localhost:5001/src/components/ProductSummaryMobileSharedDataPlansAdd.vue net::ERR_ABORTED 500 (Internal Server Error)

[yejimeiming]

This error doesn't seem to be a problem with server.host.

[rocifier]

Hi folks, is there any other suggestions? I've systematically tried all the options suggested in this thread but the issue still occurs for myself and my team

[nvhiii]

In the same boat as you, have you come up with any solution recently?

[BSims623]

This solved it for me. Stack Overflow could of sworn I got this link from this thread but now I don't see it.

[zouyunchong]

如果代理规则是localhost 请改为 本机地址(127.0.0.1) ,反之相反，亲测有效