Azure Web App流式响应异常：本地正常部署后失效问题排查

核心原因 #

Azure Web App默认启用了响应缓冲机制，会将整个响应内容缓存完成后再一次性返回给客户端，打断了流式传输的分块推送逻辑。此外，前端若未正确处理可读流的逐块读取，也可能导致流式效果失效。

解决步骤 #

1. 禁用Azure Web App的响应缓冲 #

在应用根目录创建或修改web.config文件，添加反向代理不缓冲的指令：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <!-- 告知nginx代理不要缓冲响应 -->
        <add name="X-Accel-Buffering" value="no" />
      </customHeaders>
    </httpProtocol>
    <!-- 调整服务器运行时设置，避免触发频繁请求缓冲 -->
    <serverRuntime frequentHitThreshold="1" frequentHitTimePeriod="00:00:20" />
  </system.webServer>
</configuration>

将该文件部署到Azure Web App根目录后生效。

2. 确保后端返回正确响应头 #

如果是自定义后端服务（而非直接调用OpenAI API），需返回以下响应头：

• Transfer-Encoding: chunked：标识响应为分块传输格式
• Content-Type: text/event-stream：匹配OpenAI流式响应的格式要求
• 不要设置Content-Length头：流式传输无固定内容长度，该头会触发缓冲逻辑

3. 验证前端流式处理逻辑 #

确保前端代码正确处理ReadableStream，逐块读取响应内容，示例代码如下：

const reader = res.body.getReader();
const decoder = new TextDecoder('utf-8');

async function handleStream() {
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    // 解码分块内容
    const chunk = decoder.decode(value, { stream: true });
    // 解析OpenAI的SSE格式数据
    const lines = chunk.split('\n').filter(line => line.trim() !== '');
    for (const line of lines) {
      if (line.startsWith('data: ')) {
        const data = line.slice(6);
        if (data === '[DONE]') continue;
        const parsedData = JSON.parse(data);
        // 处理单条流式数据，比如更新UI
        console.log(parsedData.choices[0].delta.content);
      }
    }
  }
}

handleStream();

4. 调整Azure Web App配置 #

• 添加应用设置WEBSITE_USE_DIRECT_CLIENT_CONNECTION并设为true，绕过部分中间代理的缓冲
• 确保使用B1及以上SKU的App Service，免费层F1可能存在流式传输的隐性限制

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