How to enable SSE (Server Sent Events) in vite dev Server?

[deepsoul]

Hi,
we wanna implement some SSE-Features in our App, but we can't handle that the evensource is captured in dev mode. What setting in vite.config is needed to develop in dev mode? When builded it works properly, but thats hard to debug, to deploy the app constantly on some PR-Branches and debug via console.log

[cassepipe]

@deepsoul I have the same problem I believe. Seem work fine with when the app is built but when I use vite's dev server with a proxy configure to reroute api path to my backend, SSE do not seem to work.

At first I thought it was because you would need a special setup for that but I am not so sure anymore. My rationale is that after all the backend when it sees a request to open a SSE line should have the correct origin to send server sent events to in the request's "Origin" header field (http-proxy, the lib which handle proxying for vite set changeOrigin to false by default.\

Moreover I see the error

{"statusCode":403,"message":"sse already opened","error":"Forbidden"}

Which means the server did receive the request for SSE and said "nope".

I suspect this is because of http-party/node-http-proxy#1582
Actually I am not sure since it is supposed to only affect node v16 and I have v19

Do you know any more than I do now ?

[channeladam]

I found a solution to allow proxying SSE to a dev backend.

Vite's proxy configuration unfortunately doesn't allow much dynamic configuration, but I worked around it.

In a key/value proxy configuration, you can implement the bypass function:

bypass: (req, res, options) => {
      if (req.headers.accept === 'text/event-stream') {
        req.overrideOptions = {
          target: MY_TARGET,
          headers: {
            Connection: 'Keep-Alive',
          },
          proxyTimeout: 3600000, // 1 hour - prevent the SSE connection from timing out for outgoing requests.
          timeout: 3600000, // 1 hour - prevent the SSE connection from timing out for incoming requests.
        };
        return true; // Proxy to the target.
      }
}

The workaround magic is setup by the configure function in that proxy config:

    configure: (proxy, options) => {
      // Hook in to fix limitation in Vite's proxy middleware with req.overrideOptions!
      overrideProxyFunctions(proxy);
    },

Here's the magic workaround:

 /*
 * Hook in to fix limitation in Vite's proxy middleware.
 * Unfortunately Vite's proxy middleware always passes an empty options object to the proxy.web() function,
 * which prevents us from dynamically setting the target on the options.
 * So we override the http-proxy web() & ws() functions here (which Vite will call).
 * Vite: https://github.com/vitejs/vite/blob/924b352c3484683051f744501b191fd4f6e63501/packages/vite/src/node/server/middlewares/proxy.ts#L221
 */
function overrideProxyFunctions(proxy) {
  const oldWebFn = proxy.web;
  const oldWsFn = proxy.ws;

  // Override https://github.com/http-party/node-http-proxy/blob/9b96cd725127a024dabebec6c7ea8c807272223d/lib/http-proxy/index.js#L96
  proxy.web = proxy.proxyRequest = function (req, res, annoyingEmptyOptionsFromVite) {
    const fixedOptions = { ...req.overrideOptions };
    oldWebFn.call(proxy, req, res, fixedOptions);
  };

  // Override https://github.com/http-party/node-http-proxy/blob/9b96cd725127a024dabebec6c7ea8c807272223d/lib/http-proxy/index.js#L97
  // Vite only passes head, and doesn't pass any options.
  proxy.ws = proxy.proxyWebsocketRequest = function (req, res, head) {
    const fixedOptions = { ...req.overrideOptions };
    oldWsFn.call(proxy, req, res, head, fixedOptions);
  };
}

[cassepipe]

I can't say I understand neither the source of the problem nor the solution to it but thank you. Amazing level of wizardry.