SSE doen't work with vue-cli devServer proxy

Question

I recently move from vue-cli 4.5.x to 5.0.x.

Since this upgrade it seems Server Sent Events (SSE) doesn't work any more with the WebPack Dev Server.
(I'm currently using vue-sse)

Note in production it works perfectly.

My devServer config looks like :

  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        ws: true,
        changeOrigin: true,
      },
    },
  },

Answer 1

It seems possible workarounds are :

1. Disable compression in the webpack devserver config.
2. Send Content-Type (or maybe rather Cache-Control : see comment above) : no-transform in the response header.

(source : https://composed.blog/sse-webpack-dev-server)

I didn't test the 2. way but the 1. works for me.

  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        ws: true,
        changeOrigin: true,
      },
    },
    // To disable compression : 
    compress: false
  },

If this doesn't help maybe you face this similar issue : https://forum.vuejs.org/t/server-sent-events-are-not-working-with-vue-cli-devserver-proxy-and-node-16-0/125450