webpack-dev-servervue-cliserver-sent-events

SSE doen't work with vue-cli devServer proxy


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,
      },
    },
  },

Solution

  • 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