You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Azure Static Web Apps中Streaming API无法流式输出问题求助

在Azure Static Web Apps中实现Streaming API时流式输出失效的原因分析

我正尝试在Azure Static Web Apps(SWA)中实现Streaming API。此前在常规的Blazor Wasm + Azure Function应用中完成了概念验证,功能运行正常,但将相同代码复制到SWA后,流式输出功能失效——所有数据仅在请求完成后一次性返回,而非实时流式推送。

请问可能的原因是什么?

Azure Function代码

[Function("GetItems")]
public static async Task<HttpResponseData> Run(
      [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
      FunctionContext executionContext)
{
    var logger = executionContext.GetLogger("GetItemsFunction");
    logger.LogInformation("C# HTTP trigger function processed a request.");

    // 创建响应
    var response = req.CreateResponse(System.Net.HttpStatusCode.OK);
    response.Headers.Add("Content-Type", "text/event-stream");
    // 添加CORS头
    response.Headers.Add("Access-Control-Allow-Origin", "*");
    response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
    response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");

    // 开始流输出
    await using (var writer = new StreamWriter(response.Body))
    {
        var items = new[] { "Item 1", "Item 2", "Item 3", "Item 4", "Item 3", "Item 4", "Item 3", "Item 4", "Item 3", "Item 4", "Item 3", "Item 4", "Item 3", "Item 4", "Item 3", "Item 4", "Item 3", "Item 4", "Item 3", "Item 2", "Item 1" };

        foreach (var item in items)
        {
            await writer.WriteLineAsync($"data: {item}");
            await writer.FlushAsync();
            await Task.Delay(1000); // 模拟延迟
        }
    }

    return response;
}

Blazor Wasm Razor页面代码

@page "/items"
@inject StreamingApiService StreamingApiService

<h3>流式数据</h3>

@if (streamedData == null)
{
    <p><em>加载中...</em></p>
}
else
{
    <ul>
        @foreach (var item in streamedData)
        {
            <li>@item</li>
        }
    </ul>
}

@code {
    private List<string> streamedData;

    protected override async Task OnInitializedAsync()
    {
        streamedData = new List<string>();

        await foreach (var item in StreamingApiService.GetStreamedData())
        {
            streamedData.Add(item);
            StateHasChanged();
        }
    }
}

辅助类代码

using Microsoft.AspNetCore.Components.WebAssembly.Http;
using System.Text.Json;

namespace ClientApp;

public class StreamingApiService
{
    private readonly HttpClient _httpClient;

    public StreamingApiService(HttpClient httpClient)
    {
        _httpClient = httpClient;
    }

    public async IAsyncEnumerable<string> GetStreamedData()
    {
        using var request = new HttpRequestMessage(HttpMethod.Get, "http://localhost:7181/api/GetChat");
        request.SetBrowserResponseStreamingEnabled(true);

        using var response = await _httpClient.SendAsync(request, HttpCompletionOption.ResponseHeadersRead);
        response.EnsureSuccessStatusCode();

        using var stream = await response.Content.ReadAsStreamAsync();
        using var reader = new StreamReader(stream);

        string line;
        while ((line = await reader.ReadLineAsync()) != null)
        {
            // 将行反序列化为MyDataItem对象
            yield return line;
        }
    }
}

可能的原因及解决方向

  • SWA默认响应缓冲机制:Azure Static Web Apps会默认缓冲函数的响应内容,直到请求完全处理完毕才返回给客户端,这是为了优化常规请求性能,但会中断流式输出的实时性。
  • 缺少流式输出配置:需要在staticwebapp.config.json中为目标API路径显式禁用缓冲,示例配置如下:
    {
      "routes": [
        {
          "route": "/api/GetItems",
          "responseBuffering": "disabled"
        }
      ]
    }
    
  • 本地与SWA环境差异:本地运行Azure Function时无SWA反向代理层,响应可直接流式推送;部署到SWA后请求经过网关,网关默认缓冲响应,必须通过配置覆盖该行为。
  • 客户端请求路径错误:辅助类中硬编码了本地地址,部署到SWA后应改为相对路径/api/GetItems,避免请求错误端点或触发额外代理逻辑导致缓冲。
  • 函数托管模式限制:确认使用隔离进程模式的Azure Function,SWA对该模式的流式支持更完善,进程内模式可能存在兼容性问题。

内容的提问来源于stack exchange,提问作者Emad Gabriel

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.22 04:07:12