ASP.NET Core中能否将CancellationToken嵌入HTTP请求URL实现流请求取消

DevOps 小满

2026-10-2

核心原因

你遇到的请求无法取消问题本质和CancellationToken本身无关，是因为Blazor为单页应用（SPA），路由切换属于客户端虚拟路由跳转，不是浏览器原生的页面卸载行为，因此浏览器默认不会主动终止img标签发起的资源请求，只有整个标签页关闭时才会统一清理这些未完成的请求，进而触发服务端的取消令牌。

解决方案

无需修改现有服务端代码，也不需要自行解析流帧，仅需要在Blazor组件销毁时主动通知浏览器终止对应的img资源请求即可，完全保留浏览器原生处理multipart/x-mixed-replace流的优势。

实现1：轻量版（无需JS）

动态绑定img的src属性，组件销毁时清空src并触发DOM更新，浏览器识别到资源不再需要会自动终止请求：

<!-- CameraLive.razor -->
@implements IAsyncDisposable
<img src="@_streamUrl" />

// CameraLive.razor.cs
private string _streamUrl = "CameraSystem/startStreaming";

public async ValueTask DisposeAsync()
{
    _streamUrl = string.Empty;
    StateHasChanged();
    // 增加短延迟确保DOM更新完成
    await Task.Delay(50);
}

实现2：稳妥版（JS操作DOM，兼容性更好）

直接通过JS操作DOM移除img节点/清空src，无需等待Blazor的UI更新队列，触发请求终止的响应更快：
首先在前端注入全局JS方法：

window.releaseImgResource = (imgElement) => {
    if(imgElement) {
        imgElement.src = '';
        imgElement.remove();
    }
}

然后调整组件代码：

<!-- CameraLive.razor -->
@implements IAsyncDisposable
@inject IJSRuntime JSRuntime
<img @ref="_imgRef" src="CameraSystem/startStreaming" />

// CameraLive.razor.cs
private ElementReference _imgRef;

public async ValueTask DisposeAsync()
{
    await JSRuntime.InvokeVoidAsync("releaseImgResource", _imgRef);
}