Axios 和 EventSource 的内容类型响应不一致

Question

问题描述：

将 EventSource API 与 Axios 结合使用时，我遇到了异常行为。该问题与发出 SSE（服务器发送事件）请求时从服务器收到的响应的 Content-Type 标头有关。

背景：

我正在使用 EventSource 向应返回服务器发送事件 (SSE) 的端点发出 GET 请求。

问题：

当我使用 Axios 发出请求时，响应的 Content-Type 标头被正确设置为 text/event-stream。这与 SSE 的预期行为一致。

但是：

当我直接在浏览器中使用本机 EventSource API 发出相同的请求时，我在响应 Content-Type 标头中遇到了差异。它被设置为 application/json 而不是预期的 text/event-stream。我在网络选项卡中收到错误：

• 响应内容类型中出现这种不一致行为的可能原因是什么 标题？
• 是否有任何已知的特定于浏览器的行为或特性可能会导致此问题？
• 如何解决这个问题？

参考代码如下：

const eventSource = new EventSource(`${url}`, {
   withCredentials: true,
});

eventSource.onopen = () => {
   console.log('Connection opened.');
};

eventSource.onerror = (error) => {
   console.error('Error:', error);
};

eventSource.onmessage = (event) => {
   const eventData = JSON.parse(event.data);
   console.log('Received event:', eventData);
};

我非常感谢任何有助于解决此问题的见解、建议或潜在解决方案。感谢您提前的帮助！

• 根据我对服务器发送事件的理解，我希望服务器的响应 Content-Type 标头设置为 text/event-stream，因为 SSE 涉及连续的数据流。
• 我希望 EventSource API 能够正确解释和处理 SSE 流，使我能够捕获和处理流式事件。

我正在寻求深入了解可能导致这种不一致的原因，以及如何确保 Axios 和 EventSource API 将响应 Content-Type 标头正确解释为文本/事件流。

Answer 1

这只是一组问题和故障排除思路：

首先，最有用的故障排除建议是从curl运行它，并使用

curl -v

查看正在发送和接收的标头。将它们与您在浏览器窗口中看到的内容进行比较。

您控制服务器吗？如果是这样，您可以在那里记录正在接收的标头吗？使用 EventSource 和 axios 有什么不同吗？

new EventSource(`${url}`, {...})

与写作相同：

new EventSource(url, {...})

您选择第一种方式有什么原因吗？您确定从 axios 调用时调用的是完全相同的 URL 吗？

我还想知道当你有EventSource时为什么要从axios调用它？ :-) 它是否在脚本中使用？脚本与浏览器运行在同一台机器上吗？如果没有，特别是如果是不同的网络，是否可能存在中间防火墙或修改请求的东西？