Angular对接Spring Webflux使用EventSource时报.request is not a function错误

报错原因及解决方案 #

核心原因定位 #

该报错通常出现在使用第三方eventsource npm包而非浏览器原生EventSource的场景下，request是第三方包内部依赖的请求处理方法，报错说明该方法没有被正确初始化。具体可从以下几个方向排查： #

1. 第三方包引入/版本异常 #

如果你的项目为了支持POST请求、自定义请求头等原生EventSource不具备的能力，安装了eventsource npm包，可先做如下验证：

• 检查import语句是否正确，不要使用解构导入，正确写法：

import EventSource from 'eventsource'

• 锁定包版本到经过验证的稳定版，例如2.0.2，避免beta版本的兼容性问题
• 如果使用Vite/Rollup打包，将eventsource加入optimizeDeps.include配置项，避免tree-shaking把内部依赖逻辑误删除

2. 配置参数格式错误 #

原生EventSource的第二个参数仅支持withCredentials一个配置项，如果你传入的options包含headers、method、body等额外字段，会直接触发初始化异常：

• 如果不需要自定义请求参数，可直接去掉options参数测试，测试代码如下：

return new Observable<string>(obs => {
  // 先去掉options参数验证基础连接是否正常
  const es = new EventSource(`${this.Url}${path}`);
  es.addEventListener('message', (evt) => {
    console.log(evt.data);
    obs.next(evt.data);
  });
  // 新增错误监听方便定位连接问题
  es.addEventListener('error', (err) => {
    console.error('连接异常', err);
    obs.error(err);
    es.close();
  });
  return () => es.close();
});

• 如果确实需要传自定义请求头/POST参数，要确认你传入的配置项完全符合你使用的eventsource包版本的参数规范

3. 后端响应格式不符合要求 #

Spring Webflux接口必须返回正确的响应头才能被EventSource正常识别：

• 接口produces必须指定为text/event-stream
• 必须添加Cache-Control: no-cache响应头禁用缓存
  后端参考代码：

@GetMapping(path = "/your/path", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public Flux<String> streamData() {
    // 注意返回数据必须符合SSE格式：data: 内容\n\n
    return Flux.just("test1", "test2")
            .map(item -> "data: " + item + "\n\n");
}

内容的提问来源于stack exchange，提问作者DP3