Axios项目中Fetch适配器与流式请求的阻塞问题分析

问题背景

在Web开发中，Server-Sent Events(SSE)是一种常见的服务器推送技术，它允许服务器向客户端单向发送事件。在使用Axios库时，开发者发现当使用fetch适配器处理SSE流式请求时，会导致其他并发的普通请求被阻塞，处于永久挂起状态。

问题现象

开发者在使用Axios的fetch适配器实现SSE客户端时，遇到了一个奇怪的现象：当发起一个配置了responseType: 'stream'的GET请求后，系统中其他某些特定的API请求会被永久阻塞。具体表现为：

1. SSE请求本身可以成功建立连接
2. 其他某些特定端点(如用户信息接口)的请求会一直处于pending状态
3. 服务器端甚至没有收到这些被阻塞的请求
4. 问题不仅限于Axios的fetch适配器，使用其他专门的SSE客户端库也会出现同样问题

技术分析

流式请求的特点

流式请求与传统HTTP请求有几个关键区别：

1. 连接保持：SSE连接会长期保持打开状态，服务器可以持续推送数据
2. 响应处理：客户端需要以流的方式逐步处理响应数据，而不是等待完整响应
3. 协议要求：必须使用特定的text/event-stream内容类型

问题根源

经过深入排查，发现问题的真正根源在于服务器端实现：

1. 响应包装问题：服务器使用了Spring框架的过滤器对响应进行包装，目的是记录日志
2. 流式不兼容：这种包装方式与流式响应不兼容，特别是当响应中既包含SSE事件又包含普通消息时
3. 连接争用：不恰当的包装导致HTTP连接被异常占用，进而阻塞了其他请求

解决方案

要解决这个问题，需要从服务器端进行调整：

1. 移除响应包装：对于SSE端点，应该绕过任何响应包装或日志记录过滤器
2. 纯事件流：确保响应只包含符合SSE协议的事件数据，不混合其他内容
3. 连接管理：正确实现HTTP连接池管理，避免连接被不当占用

最佳实践

在使用Axios处理SSE或其他流式请求时，建议：

1. 专用端点：为SSE使用专门的API端点，不与其他功能混合
2. 适当配置：正确设置请求头(Accept: text/event-stream)和响应类型
3. 服务器优化：确保服务器端对SSE有专门处理逻辑，不应用通用过滤器
4. 连接监控：实现连接状态监控，及时发现和释放异常连接

总结

这个问题展示了HTTP流式请求与传统请求处理的重要区别。开发者在使用高级网络功能时，需要全面考虑客户端和服务器端的协同工作方式。特别是对于长连接和流式传输场景，传统的请求-响应模型中的许多假设不再适用，需要特别处理。通过理解底层机制和正确配置，可以避免这类看似诡异的问题。