如何在.NET Core的Swagger 3.0中显示类似Postman的响应大小

该需求可以通过自定义中间件+Swagger UI扩展脚本实现，最终效果和Postman的响应大小展示一致，具体操作步骤如下：

步骤1：新增响应长度计算中间件 #

首先创建自定义中间件统计接口响应字节大小，将数值存入响应头方便后续读取，适配.NET 6+版本的代码如下：

public class ResponseSizeMiddleware
{
    private readonly RequestDelegate _next;

    public ResponseSizeMiddleware(RequestDelegate next)
    {
        _next = next;
    }

    public async Task InvokeAsync(HttpContext context)
    {
        // 过滤Swagger静态资源请求，仅统计业务接口
        if (context.Request.Path.StartsWithSegments("/swagger"))
        {
            await _next(context);
            return;
        }

        // 替换原始响应流，通过内存流复制内容计算长度
        var originalBodyStream = context.Response.Body;
        using var responseBody = new MemoryStream();
        context.Response.Body = responseBody;

        await _next(context);

        // 计算响应大小，写入自定义响应头
        var responseSize = context.Response.ContentLength ?? responseBody.Length;
        context.Response.Headers.TryAdd("X-Response-Size", $"{FormatSize(responseSize)}");

        // 把内存流内容写回原始响应流返回给前端
        responseBody.Seek(0, SeekOrigin.Begin);
        await responseBody.CopyToAsync(originalBodyStream);
        context.Response.Body = originalBodyStream;
    }

    // 字节大小格式化方法，转换为易读的KB/MB等单位
    private string FormatSize(long bytes)
    {
        string[] sizes = { "B", "KB", "MB", "GB" };
        int order = 0;
        while (bytes >= 1024 && order < sizes.Length - 1)
        {
            order++;
            bytes /= 1024;
        }
        return $"{bytes:0.##} {sizes[order]}";
    }
}

完成后在Program.cs中注册中间件，注意必须放在Swagger相关中间件的前面：

// 顺序不能错，要放在UseSwagger之前
app.UseMiddleware<ResponseSizeMiddleware>();

app.UseSwagger();
app.UseSwaggerUI();

步骤2：注入自定义脚本到Swagger UI渲染响应大小 #

• 首先在项目wwwroot目录下新建swagger-extend.js文件，内容如下：

document.addEventListener('DOMContentLoaded', function() {
    // 监听页面DOM变化，捕获Swagger响应渲染事件
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                // 匹配Swagger响应头展示区域
                const responseHeaders = document.querySelectorAll('.response-headers');
                responseHeaders.forEach(headerEl => {
                    // 查找自定义的响应大小头
                    const sizeHeader = Array.from(headerEl.querySelectorAll('tr')).find(tr => 
                        tr.textContent.includes('X-Response-Size')
                    );
                    if (sizeHeader && !sizeHeader.dataset.processed) {
                        sizeHeader.dataset.processed = 'true';
                        // 把响应大小移到响应信息栏更显眼的位置
                        const sizeValue = sizeHeader.querySelector('td').textContent;
                        const infoBar = headerEl.closest('.response').querySelector('.response-info');
                        if (infoBar) {
                            const sizeTag = document.createElement('span');
                            sizeTag.style.marginLeft = '15px';
                            sizeTag.style.fontWeight = 'bold';
                            sizeTag.style.color = '#28a745';
                            sizeTag.textContent = `响应大小: ${sizeValue}`;
                            infoBar.appendChild(sizeTag);
                        }
                    }
                });
            }
        });
    });
    observer.observe(document.body, { childList: true, subtree: true });
});

• 然后修改Program.cs中的Swagger UI配置，引入自定义脚本，同时开启静态文件访问：

// 开启静态文件访问，要放在UseSwaggerUI之前
app.UseStaticFiles();

app.UseSwaggerUI(c =>
{
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");
    // 注入自定义扩展脚本
    c.InjectJavascript("/swagger-extend.js");
});

可选优化：隐藏自定义响应头 #

如果不希望前端获取到X-Response-Size这个自定义头，可以在中间件写回响应流之后，新增代码移除该头：

// 写回原始流之后移除自定义头
context.Response.Headers.Remove("X-Response-Size");

完成以上配置后重启项目，调用Swagger接口即可在响应信息栏看到响应大小展示。

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