【EventSource错误解决方案】设置Proxy后SSE发送的数据只在最后接收到一次，并且数据被合并

出错描述

  SSE前后端一切正常，但是fetchEventSource 的onmessage回调函数只在所有流都发送完毕后，才会执行一次。

  前端用的是Vue3，webpack打包，同时设置了Proxy：

devServer: {
    // 开发服务器配置
    proxy: {
      // 配置代理
      '/api': {
        target: 'http://localhost:5000', // 代理的目标地址
        changeOrigin: true, // 是否需要改变源
        pathRewrite: {
          '^/api': '' // 重写路径，去掉请求路径中的 /api
        },
      }
    }
  }

出错原因与解决方案

  webpack-dev-server 4.0里默认开启了compress，导致解析SSE数据起冲突。

  只需要加一行compress: false即可：

devServer: {
    compress: false,
    // 开发服务器配置
    proxy: {
      // 配置代理
      '/api': {
        target: 'http://localhost:5000', // 代理的目标地址
        changeOrigin: true, // 是否需要改变源
        pathRewrite: {
          '^/api': '' // 重写路径，去掉请求路径中的 /api
        },
      }
    }
  }

  参考：
  https://github.com/vuejs/vue-cli/issues/7348
  https://stackoverflow.com/questions/71783075/sse-doent-work-with-vue-cli-devserver-proxy