【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