(Nuxt 3.7) Dev websocket (hmr) not working when using local https

[vanling]

Summary:

Websocket connection fails with security errors when running Nuxt 3.7.0 with HTTPS enabled.

Steps to Reproduce:

1. I use mkcert to create cert to enable HTTPS locally for development.
2. I run the following command to start the Nuxt development server:

   nuxt dev --host local.domain.nl --https --ssl-cert local.domain.nl.pem --ssl-key local.domain.nl-key.pem
   

   Note: This setup worked as expected prior to version 3.7.

Expected Behavior:

Both HTTPS and Websocket connections should work without issues.

Actual Behavior:

While HTTPS works as expected, the Websocket connection fails with the following errors:

1. Mixed Content: The page at 'https://local.domain.nl:3000/' 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.

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

Example package.json Configuration:

{
  "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"
  }
}

Environment Information:

• Operating System: Darwin
• Node Version: v18.16.1
• Nuxt Version: 3.7.0
• CLI Version: 3.7.2
• Nitro Version: 2.6.2

Related

#107
#108

[pi0]

Thanks for making a detailed issue. Websocket itself is not working ATM. I have linked it to main tracker #108

[pi0]

It should be resolved in nuxi-edge and next release of nuxi.

You can confirm with npx nuxi-edge@latest dev playground --https --host nuxt.fbi.com

[vanling]

@pi0 Can confirm https local hmr works again <3 !
Thank you, very, very much, man.. been refreshing the page after every save/change for 2 days like it's 2015.

[nandi95]

@pi0 I tried the edge channel as per nuxt/nuxt#14937 (comment) but I'm still getting this issue. I'm using ssl key and cert like in the issue description. This has not been an issue in ~3.6.
Adding the below to the nuxt config solves this:

vite: {
    server: {
        hmr: {
            protocol: 'ws',
            host: 'localhost'
        }
    },
}

[pi0]

@nandi95 Can you please try with latest 3.7.3? If still broken, feel free to open a new issue so i can investigate 👍🏼

[nandi95]

@nandi95 Can you please try with latest 3.7.3? If still broken, feel free to open a new issue so i can investigate 👍🏼

on nuxt edge channel fixed in 3.7.1-28223216.aa0ea8bf