sapphi-red/vite-setup-catalogue

No example with reverse ssl proxy

HendrikJan opened this issue · 3 comments

HendrikJan commented

Thank you for having this repo with Vite setup examples.
The example "With proxy" is almost what I need.

Except that my proxy provides the https for me:

[Browser (https)] <---> [Proxy] <---> [Vite (http)]

The "With proxy" example works for everything, except for HMR.
HMR is giving me this error (in Chrome):

client.ts:78 Mixed Content: The page at 'https://tapp.docker:9004/report?activeYear=2022-2023' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://tapp.docker:24678/_nuxt/'. This request has been blocked; this endpoint must be available over WSS.

I could not find any way to make the client use "https", while the Vite server is using "http".
Probably this is not possible in Vite, but if it is possible, could an example be added here?

Some things I tried:

  server: {
    hmr: {
      protocol: 'wss'
    }
  },
  server: {
    hmr: {
      server: {
        https: true
      }
    }
  },
  server: {
    hmr: {
      path: 'wss://tapp.docker:24678/_nuxt/'
    }
  },
sapphi-red commented

Vite uses wss if server.hmr.protocol is not set and the page is loaded with https.
https://github.com/vitejs/vite/blob/420782c76733ecc8314bccc2255976347add3d2e/packages/vite/src/client/client.ts#L26

I guess it's because nuxt overrides the value here.
https://github.com/nuxt/nuxt/blob/ebf3ec398f83ca5c2f62916c1e835fa040ad44cc/packages/vite/src/client.ts#L116

Would you try with a plain Vite instead of nuxt?

HendrikJan commented

Thank you so much for your time!
What you link to looks like the cause of the problems indeed.

My time is a bit limited unfortunately (and sorry for that), so I'll not be able to try plain Vite right away.
I'll try to try it this week.

HendrikJan commented

Even though I did not try this with plain Vite (I'm not experienced with that, only a bit with Nuxt-bridge), I'm quite sure that Vite is working correctly.

In Nuxt-bridge I found that this config:

  vite: {
    server: {
      hmr: {
        protocol: 'wss',
        clientPort: 9004
      }
    }
  },

will make the client use wss:// even when the server uses http://.
There are other issues arising now, but nothing to do with Vite -- so closing this issue.

  • 👍1