Caddy Server Reverse Proxy SSL Infinite Loop

[stolinski]

I chatted a bit about this in the discord and was unable to make any progress. I'd love to start a discussion here incase anyone has had similar issues.

The Setup

vite: ^2.1.1

We have an https://fakedomain.dev reverse proxy on local that's being reverse proxied with generated SSLs with Caddy server. Our Caddy file looks like

{
  local_certs
}

fakedomain.dev {
  reverse_proxy 127.0.0.1:3000
}

The issue

When visiting fakedomain.dev, the site inifinite loops with logs saying

WebSocket connection to 'wss://localhost:3000/' failed: or WebSocket connection to 'wss://fakedomain.dev:3000/' failed: based on how our Vite is configured

What I've tried already

https: true in Vite config. -> Server then responds with a 502

Changing server.hmr

Forced http1.1 in our reverse proxy.

Notes

localhost:3000 works fine, but we'd prefer to have https & our reverse proxy as Safari refuses localhost httpOnly, secure cookies. Not a dealbreaker, but we'd really like to be able to reliably test Safari in dev.

I've been reading issues all morning, but nothing seems to do the trick. #1653, #1926, #1925

This same setup works in Snowpack with no special config. Not saying that to diss Vite, just as a note that something in the differences in how Vite handles wss in reverse proxies seems to be the issue.

I'll make a reproduction and an issue, but wanted to get this out there in case anyone else is having this issue.

Thanks!

[stolinski]

Small update.

I checked my Snowpack setup with the same and it's websocket connects to wss://fakedomain.dev correctly.

Notice how wss://fakedomain.dev:3000/ in Vite, wss://fakedomain.dev in Snowpack. This would tell me that I could get the proxy working by not having a port at all for the wss. Is there any way to configure Vite to not use a port for the WS?

[stolinski]

Another update here...
I tweaked https://github.com/vitejs/vite/blob/main/packages/vite/src/client/client.ts#L18
and removed the port from Vite's source and it fixed my problem.

[stolinski]

OK! Here's the fix.

Thank you to @matias-capeletto for helping me in the discord and sending me #1757

  server: {
    hmr: {
      host: 'fakedomain.dev',
      port: 443,
      protocol: 'wss',
    },
  },

Was the config that did the trick. 443 with Caddy SSL will passthrough allowing the wss path to connect.

[rossPatton]

Hey - I'm having this exact problem and your solution here doesn't seem to work for me. Same situation, same flow of bugs (the 502, etc). I'm using a caddy reverse proxy via docker.

Possible to see the full vite config you're using?

[BenWaNH]

Is it possible to get more information about this?
I encount the same issue but nothing seems fix it. My vite server reload in infinite.... Thanks fo your help

[sshmaxime]

@BenWaNH same thing here, have you found a solution ?

[2u841r]

Came from Syntax episode 798