在 Blazor 8 Pages 中使用 POST 从 Web Share API 接收共享数据并将请求 formData 绑定到参数中

Question

我有一个

PWA

Web 应用程序，以前仅在 ASPNet Core MVC 中使用，现在我将其转换为 Blazor 8。

我正在使用通过 Web Share API 在应用程序外部调用的共享数据。这在 MVC 应用程序中完美运行，可以接收共享文本、url、文件等。 然而，在 Blazor 中，它仅适用于

GET

方法。由于

POST

不存在或 formData 未绑定，

AntiforgeryToken

方法失败

GET

方法仅适用于普通文本和 url，但我还需要

POST

方法来启用文件共享。

但我无法将

formData

绑定到 Blazor 页面。

MVC 选项

在 MVC 中，这适用于

GET

和

POST

，因为

[ValidateAntiForgeryToken]

未指定，因此不是必需的。

MVC 控制器

    public class ShareController : Controller
    {
        public IActionResult MVCShareFromGet([FromQuery] string url, [FromQuery] string title)
        {
            return View("MVCShare", new Sharemodel(url, title));
        }
        public IActionResult MVCShareFromPost([FromForm] string url, [FromForm] string title)
        {
            return View("MVCShare", new Sharemodel(url, title));
        }

对于

POST

方法，属性由

[FromForm]

绑定，而在

GET

方法中，它是

[FromQuery]

MVC视图：

@model DataCoord.Sharemodel
<p>Title: @Model.title</p>
<p>Url: @Model.url</p>

Blazor 选项

在 Blazor SSR 中

Antiforgery

是默认设置的。因此，在

GET

方法中，它可以工作，但在

POST

方法中将会失败。 清单：

    "action": "/BlazorShareGet", 
    "method": "GET", 
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
      ...

Blazor 页面：

@page "/BlazorShareGet" 
<p>Shared title: @title</p>
<p>Shared url: @url</p> 
@code { 
    [SupplyParameterFromQuery]
    string? title { get; set; }
    [SupplyParameterFromQuery]
    string? url { get; set; }
}

清单：

    "action": "/BlazorSharePost", 
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url"
      ...

Blazor 页面：

@page "/BlazorSharePost"
<p>Shared title: @title</p>
<p>Shared url: @url</p>
@code {
    [SupplyParameterFromForm]
    string? title { get; set; }
    [SupplyParameterFromForm]
    string? url { get; set; }
}

For the `POST` method the I try to bind the formData by `[SupplyParameterFromForm]` ???? but not sure if this is correct, whereas in the `GET` method it is `[SupplyParameterFromQuery]` which works.

我收到以下错误：

A valid antiforgery token was not provided with the request. Add an antiforgery token, or disable antiforgery validation for this endpoint.

当我完全禁用防伪功能时

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

我明白了

The POST request does not specify which form is being submitted. To fix this, ensure <form> elements have a @formname attribute with any unique value, or pass a FormName parameter if using <EditForm>.

我也尝试过

[SupplyParameterFromForm]

、

[SupplyParameterFromQuery]

、

[Parameter]

、

[CascadingParameter]

注意我无法控制请求，因为它来自第三方/浏览器

检查请求是否存在匹配的 .AspNetCore.Antiforgery Cookie

问题

1. 如何仅针对此端点禁用防伪验证？
2. 如何将发布的 formData 绑定到 Blazor 页面

Answer 1

在我的测试中，将其添加到页面模型上，即以特定的页面处理程序方式执行，仍然由全局过滤器控制。对于 Blazor 页面，您可以使用

[IgnoreAntiforgeryToken]

通过特定操作方法禁用防伪令牌。

[ApiController]
[Route("[controller]")]
public class BlazorController : ControllerBase
{

    [HttpPost("BlazorPost")]
    [IgnoreAntiforgeryToken]
    public IActionResult BlazorPost([FromForm] string title, [FromForm] string url)
    {
        ...
        return Ok(new { title, url });
    }
}

将发布数据绑定到 Blazor 页面属性并不是典型用例，因为 Blazor 的操作方式不同。您通常会使用 C# 方法处理表单提交，并使用模型绑定编辑组件。