首页 > 解决方案 > XHR POST:到 API 控制器有效,到 Razor 页面失败

问题描述

我有一个从 Visual Studio 模板创建的标准 ASP.NET Core Web 应用程序。我有一个剃须刀页面,它在更改事件时发出带有有效负载的 XHR POST 请求。

如果我将请求的 url 设置为应用程序中的 api 控制器(即Controllers文件夹下),则请求成功。

如果我向剃刀页面方法(Pages文件夹下)发出相同的请求,相同的有效负载,它会失败并显示 http 400。

两种方法具有相同的签名。

谁能描述为什么行为不同?

我基本上想在剃须刀页面中使用该工具从 XHR POST 到处理程序方法。

UserController.cs

namespace Athena.Web.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class UserController : ControllerBase
    {
        public void Post([FromBody]object postedObj)
        {
            ...
        }
    }
}

Usr.cshtml.cs

namespace Athena.Web.Pages.Users
{
    public class UsrModel : PageModel
    {
        public void OnPostActionHere([FromBody]object postedObj)
        {
            ...        
        }

        public void OnPost([FromBody]object postedObj)
        {
            ...
        }
    }
}

Usr.cshtml

@page "{handler?}"
@model Athena.Web.Pages.Users.UsrModel
@{
    ViewData["Title"] = "Edit";
}

<h1>User</h1>

我无法发布 XHR 调用,因为它来自第三方 Syncfusion 控件,但调用页面基本上是:

Index.cshtml

<ejs-grid id="grid">
    <e-data-manager updateUrl="/api/User" insertUrl="/Home/Usr" adaptor="UrlAdaptor">
...
</ejs-grid>

标签: asp.net-corerazor-pages

解决方案


当针对带有 400 Bad Request 的 Razor 页面处理程序方法时,XHR Post 请求总是失败,因为您没有在请求中包含请求验证令牌,无论是作为表单字段还是标头。

https://www.mikesdotnetting.com/article/336/ajax-posts-in-razor-pages-and-http-400-errors

生成令牌的最简单方法是包含<form>方法设置为 的元素post,然后您可以在请求中包含令牌:

$.ajax({
    type: "POST",
    url: "/",
    data: { foo: "bar" },
    headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
    success: function (response) {

推荐阅读