如何捕获失败的EventSource连接的HTTP响应状态码？

好问题！当EventSource（SSE）连接失败时，默认的error事件不会直接把HTTP状态码递到你面前，得用点小技巧才能拿到。我给你整理了几种实用的方法，按场景选就行：

方法一：直接在error事件中读取状态码（现代浏览器首选） #

大部分现代浏览器（Chrome、Firefox、Edge等）都允许你在error事件回调里，通过EventSource实例的status属性获取状态码。结合readyState判断连接状态，代码示例如下：

const eventSource = new EventSource('/your-sse-endpoint');

eventSource.onerror = function(event) {
  // 先确认连接已经关闭
  if (this.readyState === EventSource.CLOSED) {
    const statusCode = this.status;
    if (statusCode) {
      console.log(`SSE连接失败，HTTP状态码：${statusCode}`);
      // 这里可以根据状态码做不同处理，比如404提示端点不存在，500提示服务异常
    } else {
      console.log('SSE连接失败，但无法获取具体状态码（可能是跨域或纯网络故障）');
    }
  }
};

需要注意：旧版浏览器（比如IE系列）可能不支持status属性，所以如果你的项目要兼容这类环境，得考虑下面的方法。

方法二：用XMLHttpRequest预请求（兼容/可靠方案） #

如果想确保无论浏览器版本如何都能拿到状态码，可以先通过XMLHttpRequest（XHR）对SSE端点发起一次预请求，验证状态后再建立EventSource连接。这种方法的好处是兼容性拉满，缺点是会多一次HTTP请求，要注意请求上下文的一致性（比如携带相同的Cookie或认证信息）。

代码示例：

function initSSEWithStatusCheck(endpointUrl) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', endpointUrl, true);
  // 要设置Accept头为text/event-stream，和EventSource的请求保持一致
  xhr.setRequestHeader('Accept', 'text/event-stream');
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 状态码正常，正式建立SSE连接
      const es = new EventSource(endpointUrl);
      // 处理SSE消息
      es.onmessage = function(msgEvent) {
        console.log('收到SSE消息：', msgEvent.data);
      };
      // 处理后续错误
      es.onerror = function() {
        console.log('SSE连接运行中出现错误');
      };
    } else {
      console.log(`SSE端点预请求失败，HTTP状态码：${xhr.status}`);
      // 这里根据状态码做对应处理
    }
  };
  
  xhr.onerror = function() {
    console.log('网络故障，无法连接到SSE端点');
  };
  
  xhr.send();
}

// 调用方法
initSSEWithStatusCheck('/your-sse-endpoint');

注意跨域场景的限制 #

如果你的SSE请求是跨域的，得确保服务器配置了正确的CORS头。要是CORS配置不正确，浏览器会出于安全限制，隐藏具体的HTTP状态码，这时status属性会返回0，你只能知道连接失败，但拿不到具体的4xx/5xx状态码。这种情况下，先检查服务器的CORS配置是否允许你的域名发起SSE请求。

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