如何在浏览器中使用 Axios 和服务器发送事件（SSE）？

Question

我正在尝试在浏览器中接收服务器发送的事件（SSE）。我的应用程序使用 axios (v1.6.8) 进行 API 调用。这段代码（由这个答案提供）在节点中工作：

const getStreamAxios = () => {
  axios.get('https://my-domain.com/api/getStream', {
    responseType: 'stream',
    headers: {
      'Accept': 'text/event-stream',
    }
  })
    .then(response => {
      console.log('axios got a response');
      const stream = response.data;

      stream.on('data', data => {
          console.log(data.toString('utf8'));
      });
      
    })
    .catch(e => {
      console.error('got an error', e);
    });    
}

但是在浏览器中，

Promise

永远不会被满足（即：我没有收到控制台消息“axios 有响应”）。相反，我在控制台中收到此警告：

提供的值“stream”不是 XMLHttpRequestResponseType 类型的有效枚举值。

问题不在于 API 端点；除了使用 Node 检查它之外，我还验证了它也适用于浏览器中的 Apidog 和

EventSource

。

Answer 1

您只能在节点中使用

responseType: 'stream'

。来自 axios 文档：

• 从浏览器创建 XMLHttpRequests
从 node.js 发出
• http 请求

在浏览器中，

"stream"

确实不是

responseType的有效枚举值。 XMLHttpRequest

 的 mdn 页面还指出：

如果您的通信需要涉及从服务器接收事件数据或消息数据，请考虑通过

XMLHttpRequest

接口使用服务器发送的事件。

看起来如果不进行严重的黑客攻击，就不可能让 SSE 在浏览器中与 axios 一起工作。这个问题已经在他们的 github 中报告了，并且被 axios

关闭，没有任何解释

。

作为替代方案，您可以使用

EventSource

如果你真的投资了 axios，你能做的最好的事情就是使用它构建 URL，然后使用浏览器的 fetch-event-source

API

EventSource