使用Axios与EventSource时Content-Type响应不一致问题排查

一、导致Content-Type不一致的可能原因 #

• 请求头差异：原生EventSource会自动发送Accept: text/event-stream请求头，而Axios默认的Accept头通常是application/json, text/plain, */*。如果服务器端逻辑是根据请求的Accept头决定返回的Content-Type，可能出现匹配错误——比如服务器误判EventSource的Accept头，返回默认的application/json，而Axios的宽泛Accept头触发了正确的text/event-stream分支。
• 凭据与CORS配置问题：你的EventSource设置了withCredentials: true，如果服务器在处理带凭据的跨域请求时，未正确配置SSE相关响应逻辑，可能会 fallback 到返回JSON格式的错误响应（比如权限验证失败提示），而非正确的SSE流。
• 服务器端路由或缓存问题：检查服务器是否对相同端点有不同路由规则，或存在缓存机制——比如Axios请求被缓存为正确的SSE响应，而EventSource的请求因头信息不同命中缓存的JSON响应；或是服务器对EventSource请求做了特殊重定向或拦截。

二、浏览器特定行为相关的可能性 #

• EventSource预请求与CORS限制：部分浏览器在EventSource发起带凭据的跨域请求时，会先发送OPTIONS预请求。如果服务器未正确处理这个预请求（比如未返回允许的Access-Control-Allow-Origin、Access-Control-Allow-Credentials等头），浏览器会终止后续SSE请求，此时服务器可能返回错误的JSON响应，导致你看到Content-Type为application/json。
• 旧版浏览器EventSource实现bug：一些旧版本浏览器的EventSource可能存在bug，比如发送的Accept头格式不符合预期，干扰服务器对SSE请求的识别。

三、解决方法 #

客户端侧调整 #

1. 用Fetch模拟EventSource（自定义请求头）：原生EventSource不允许自定义Accept头，可通过Fetch API手动设置请求头，确保服务器识别SSE请求：

async function createCustomEventSource(url) {
  const response = await fetch(url, {
    method: 'GET',
    credentials: 'include',
    headers: {
      'Accept': 'text/event-stream',
      'Cache-Control': 'no-cache'
    }
  });

  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    const data = decoder.decode(value);
    // 分割并处理SSE格式的事件
    const events = data.split('\n\n').filter(evt => evt.trim());
    events.forEach(evt => {
      if (evt.startsWith('data:')) {
        const eventData = JSON.parse(evt.slice(5).trim());
        console.log('Received event:', eventData);
      }
    });
  }
}

2. 校验URL一致性：确保EventSource和Axios使用的URL完全一致（包括查询参数、端口、协议），避免细微差异触发服务器不同处理逻辑。

服务器侧调整 #

1. 强制返回text/event-stream：修改服务器逻辑，针对该端点无论请求头如何，都强制设置SSE相关响应头：

   Content-Type: text/event-stream
   Cache-Control: no-cache
   Connection: keep-alive
   

2. 正确处理CORS预请求：跨域场景下，确保服务器对OPTIONS预请求返回正确响应头：

   Access-Control-Allow-Origin: 你的前端域名
   Access-Control-Allow-Credentials: true
   Access-Control-Allow-Headers: Accept
   

3. 优化请求识别逻辑：不要仅依赖Accept头识别SSE请求，可通过特定查询参数（如?format=sse）明确指定返回SSE流，避免头信息差异导致的判断错误。

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