Blazor 8中Web Share API POST请求的防伪验证与表单绑定问题

1. 仅禁用指定端点的防伪验证 #

Blazor SSR默认全局启用防伪验证，针对第三方/浏览器发起的无法携带令牌的POST请求，可通过以下两种方式单独禁用目标端点的验证：

方式一：使用[IgnoreAntiforgeryToken]特性 #

直接在目标Blazor页面添加该特性，跳过当前页面所有POST请求的防伪验证：

@page "/share-receiver"
@attribute [IgnoreAntiforgeryToken]

@code {
    // 页面逻辑
}

也可以在页面的代码后置类中添加：

[IgnoreAntiforgeryToken]
public partial class ShareReceiver
{
    // 逻辑代码
}

方式二：中间件条件控制 #

如果需要更细粒度的路径匹配，可在Program.cs中通过中间件判断请求路径和方法，跳过防伪验证：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// 针对指定路径的POST请求跳过防伪验证
app.UseWhen(context => 
    context.Request.Path == "/share-receiver" && context.Request.Method == HttpMethods.Post,
    appBuilder =>
    {
        appBuilder.Use(next => context =>
        {
            context.Items["__AntiforgeryValidationSkipped"] = true;
            return next(context);
        });
    });

app.UseAntiforgery(); // 确保此中间件在UseWhen之后

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

2. 绑定POST的FormData到Blazor页面 #

Web Share API发送的POST请求为multipart/form-data格式，需通过模型绑定接收数据：

步骤1：定义接收模型 #

根据共享数据的结构创建模型类，支持文本和文件接收：

public class SharedDataModel
{
    public string? Text { get; set; }
    public IFormFile? File { get; set; }
    // 多文件接收可改为 List<IFormFile>? Files { get; set; }
}

步骤2：在页面中实现绑定与处理 #

使用[SupplyParameterFromForm]特性绑定FormData到模型，并在初始化时处理POST请求：

@page "/share-receiver"
@attribute [IgnoreAntiforgeryToken]
@inject ILogger<ShareReceiver> Logger

<h3>接收共享数据</h3>

@if (receivedData != null)
{
    <p>收到文本：@receivedData.Text</p>
    @if (receivedData.File != null)
    {
        <p>收到文件：@receivedData.File.FileName，大小：@receivedData.File.Length 字节</p>
    }
}

@code {
    private SharedDataModel? receivedData;

    [SupplyParameterFromForm]
    public SharedDataModel? SharedData { get; set; }

    protected override void OnInitialized()
    {
        if (HttpContext.Request.Method == HttpMethods.Post && SharedData != null)
        {
            receivedData = SharedData;
            // 此处添加文件保存或文本处理逻辑
            Logger.LogInformation("收到共享数据：文本={Text}，文件={FileName}", 
                SharedData.Text, SharedData.File?.FileName);
        }
    }
}

排查绑定失败 #

若出现绑定问题，可在Program.cs中启用表单绑定日志：

builder.Logging.AddFilter("Microsoft.AspNetCore.Components.Forms", LogLevel.Debug);

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