`nitro.devProxy` for websocket is not working

Question

`nitro.devProxy` for websocket is not working

Opened this issue a year ago · 18 comments

jktantan commented a year ago

Environment

Nuxt 3.7

Reproduction

Nuxt 3.7

Describe the bug

Config:

nitro:{
  devProxy: {
    '/proxy': {
      target: `http://localhost:8080`,
      changeOrigin: true,
      ws: true,
    },
}

In web:

If direct connect to Websocket Server:

Additional context

No response

Logs

No response

Answer 1 · 2023-08-28T05:51:50.000Z

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

Answer 2 · 2023-08-28T06:22:37.000Z

nuxt/nuxt#15417

Answer 3 · 2023-08-28T06:38:33.000Z

nuxt/nuxt#15417

Interesting, if I downgrade to NUXT 3.6.5, then your code is working. But I try to using your code for NUXT 3.7, that is not working.

Answer 4 · 2023-08-28T06:41:54.000Z

It seems like this is related to how the new Nuxt CLI works, introduced in Nuxt 3.7. #101

Answer 5 · 2023-08-28T08:42:04.000Z

Thanks for the issue. I will be working on a quick solution to make it working again on nuxi 3.7 👍🏼

Answer 6 · 2023-08-28T11:51:15.000Z

I hope when this is fixed the following works again

{
  "name": "domain.nl",
  "private": true,
  "scripts": {
     "dev": "nuxt dev --host local.domain.nl --https --ssl-cert local.domain.nl.pem --ssl-key local.domain.nl-key.pem"
   }
}

package.json

Answer 7 · 2023-08-28T12:05:37.000Z

host issue is fixed already in latest 3.7.2 cli release. Can you please confirm that? 🙏

Answer 8 · 2023-08-28T12:12:11.000Z

@pi0 Replacing nuxt dev with npx nuxi dev > Still getting the error

- Node Version:     v18.16.1
- Nuxt Version:     3.7.0
- CLI Version:      3.7.2
- Nitro Version:    2.6.2

Mixed Content: The page at 'https://local.domain.nl:3000/ild' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://local.domain.nl:24678/_nuxt/'. This request has been blocked; this endpoint must be available over WSS.

client.ts:69 [vite] failed to connect to websocket (SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.).

This worked in 3.6.5

Answer 9 · 2023-08-28T12:30:08.000Z

host issue is fixed already in latest 3.7.2 cli release. Can you please confirm that? 🙏

Unfortunately, it still doesn't work.

Answer 10 · 2023-08-28T13:49:50.000Z

@jktantan I meant the host. WebSocket issue is not resolved yet.

Answer 11 · 2023-08-28T13:50:50.000Z

@pi0 I will open a new issue to keep things clear here.

host+ssl -> #112

Answer 12 · 2023-08-30T18:50:31.000Z

With #127 (v3.7.3), you can hook into the listen event to register a custom ws handler. Check out this example for usage.

Will be working on some upstream (nitro) fixes to fully unblock devProxy support as well 👍🏼

Answer 13 · 2023-12-11T19:32:39.000Z

With #127 (v3.7.3), you can hook into the listen event to register a custom ws handler. Check out this example for usage.

Will be working on some upstream (nitro) fixes to fully unblock devProxy support as well 👍🏼

Thank you @pi0 for the information ! This help me find a workaround
I use multiple Nuxt projects in iframe, in this case HMR does not work at all.
@jktantan @ucw maybe can be useful for you and anyone in this case :

import { defineNuxtConfig } from "nuxt/config"
import { createProxyServer } from "httpxy"

export default defineNuxtConfig({
  nitro: {
    devProxy: {
      // Not working
      "/editor/assets/": {
        target: "ws://localhost:5003/editor/assets/",
        ws: true
      }
    }
  },
  hooks: {
    // Workaround
    listen(server) {
      const proxy = createProxyServer({ target: { host: "localhost", port: 5003 } })

      server.on("upgrade", (req, socket, head) => {
        if (req.url === "/editor/assets/") {
          proxy.ws(req, socket, head) // socket has type error by it works
        }
      })
    }
  }
})

Answer 14 · 2024-01-28T14:08:18.000Z

@jenjen75 Solution worked for me. Also, this gist can be helpful:
https://gist.github.com/ucw/67f7291c64777fb24341e8eae72bcd24

Answer 15 · 2024-04-11T11:23:24.000Z

Can we proxy websockets still in Nuxt 3.11 when Nitro's experimental websocket support is enabled? The above workaround is no longer working for me.

Answer 16 · 2024-04-23T13:03:03.000Z

same thing here. workaround was fine before upgrading to 3.11

Answer 17 · 2024-07-08T10:54:41.000Z

any news regarding this issue?

Answer 18 · 2024-09-24T02:24:29.000Z

any update on this? this is holding up a production deployment