Blazor Web应用刷新后提交EditForm出现Bad Request问题排查

问题本质 #

InteractiveAuto模式下，页面刷新后首次是服务器端渲染（SSR），此时EditForm的请求上下文和交互式运行时存在差异：你用的HttpClient.GetAsync()触发的请求被ASP.NET Core请求管道直接拦截返回400，根本到不了控制器——不是因为缺method=post，而是Get请求没带必要的防伪造令牌，且验证操作本就不该用Get方式。另外刷新后表单自动填充失效，是SSR渲染的表单未触发浏览器自动填充规则导致的。

具体解决步骤 #

1. 替换Get请求为Post，携带防伪造令牌 #

验证操作改用Post更安全，同时要确保请求携带Blazor的防伪造令牌，避免被拦截：

<EditForm Model="@Model" OnValidSubmit="VerifyStudent">
    <!-- 你的表单输入控件 -->
</EditForm>

@code {
    [Inject]
    private IHttpClientFactory HttpClientFactory { get; set; }
    [Inject]
    private IAntiforgery Antiforgery { get; set; }

    private StudentVerifyModel Model { get; set; } = new();

    private async Task VerifyStudent()
    {
        var client = HttpClientFactory.CreateClient();
        // 获取并添加防伪造令牌到请求头
        var tokens = await Antiforgery.GetAndStoreTokensAsync(HttpContext);
        client.DefaultRequestHeaders.Add("RequestVerificationToken", tokens.RequestToken);

        // 用Post请求传递验证数据
        var response = await client.PostAsJsonAsync("/api/Student/Verify", Model);
        if (response.IsSuccessStatusCode)
        {
            var verifiedData = await response.Content.ReadFromJsonAsync<VerifiedStudentModel>();
            // 这里处理第二个EditForm的字段填充逻辑
        }
    }
}

2. 修复Model初始化问题 #

别在OnParametersSetAsync里直接重置Model，这个方法会在参数变化时重复触发，改成在OnInitializedAsync里初始化，避免SSR阶段表单状态混乱：

@code {
    protected override async Task OnInitializedAsync()
    {
        if (Model == null)
        {
            Model = new StudentVerifyModel();
        }
    }
}

3. 恢复表单自动填充 #

给表单输入控件加上autocomplete属性，明确告诉浏览器自动填充规则：

<InputText @bind-Value="Model.StudentId" autocomplete="username" />
<InputText @bind-Value="Model.StudentName" autocomplete="name" />

额外提醒 #

• 控制器的验证接口记得加[ValidateAntiForgeryToken]特性，Post请求默认需要这个验证
• 打开浏览器控制台查看网络请求，确认RequestVerificationToken头已正确携带，避免令牌缺失
• InteractiveAuto模式下尽量统一用Post处理表单提交，别混用Get，避免SSR和交互式模式的上下文冲突

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