ajax - ASPNET CORE Ajax Post 结果为 400 Bad Request

Question

我正在开发基于 ASP.NET Core 构建的 ASP.NET Zero。当我在其中一个页面上使用 KendoUI Upload 控件时，出现了错误的请求错误。经过大量研究和调查，我意识到 HTTP POST Ajax 请求失败并出现 400 bad request 错误。下面的代码示例有一些针对我测试的其他场景的注释行。 stack over flow 中现有的帖子都没有解决我的问题。下面是我的 ajax 调用:

 $.ajax({
            url: "/test/TestCall",
            type: 'Post',
           /* data: JSON.stringify({ "Param1": "test" }),
            dataType:"json",
            processData: false,  */// tell jQuery not to process the data
            contentType: "application/json",  // tell jQuery not to set contentType
            success: function (result) {
                var res = result;
            },
            error: function (jqXHR) {
                var z = 3;
            },
            complete: function (jqXHR, status) {
                var x = 10;
            }
        });

我的 Controller 代码是:我也尝试过不从 MyTestProjectControllerBase 扩展而仅使用 Controller 基类。它不起作用。

public class TestController : MyTestProjectControllerBase
{
    public IActionResult Index()
    {
        return View();
    }

   [HttpPost]
    public ActionResult TestCall()
    {
        //return Content("Name is:" );
        return new ContentResult() { Content = "test" };
    }
}

我错过了什么？我尝试使用 postman ，我看到了这个附加信息“由于语法错误，无法满足请求”

在这个问题上花费了 8 个小时后仍无法弄清楚。不确定问题是与 Asp.net core 还是 asp.net 0 相关。任何指示将不胜感激。

查看shyju的评论后更新:Startup.cs 文件具有以下启用 AntiForgeryTokenAttribute 的代码

 services.AddMvc(options =>
        {
            options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute());
        }).SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

根据 shyju 的回答更新 ajax 调用和 View :

  $("#backBtn").on("click", function (e) {
        var t = $("input[name='__RequestVerificationToken']").val();
        $.ajax({
            url: "/test/TestCall",
            type: 'Post',
           /* data: JSON.stringify({ "Param1": "test" }),
            dataType:"json",
            processData: false,  */
            contentType: "application/json",  
            headers: {
                "RequestVerificationToken": t
            },
            success: function (result) {
                var res = result;
            },
            error: function (jqXHR) {
                var z = 3;
            },
            complete: function (jqXHR, status) {
                var x = 10;
            }
        });
    });

我的 View 现在看起来像这样:删除了 html 的其余部分

<div id="container">
    @Html.AntiForgeryToken()
    <div class="k-edit-field label">Vendor Name</div>
</div

Answer 1

看起来您已全局应用了 AutoValidateAntiforgeryTokenAttribute 过滤器。这意味着当调用 HTTP Post 操作方法(普通或 ajax)时，框架将检查提交的请求数据，如果没有找到有效的防伪造 token (RequestVerificationToken header)，它将被被认为是错误的请求，并且将发回 400 响应。

要解决此问题，您可以显式读取 __RequestVerificationToken 隐藏输入的值(由表单标记助手生成)并将其发送到您的 ajax 请求 header 中。

var t = $("input[name='__RequestVerificationToken']").val();

$.ajax({
    url: "/test/TestCall",
    type: 'Post',
    headers:
    {
        "RequestVerificationToken": t
    },
    success: function (result) {
        alert("Success");
        var res = result;
    },
    error: function (jqXHR) {
        var z = 3;
    },
    complete: function (jqXHR, status) {
        var x = 10;
    }
});

您可以通过将 IAntiforgery 实现注入(inject) View /页面并使用 GetAndStoreTokens 方法来使代码更加健壮。

将此添加到您的 View

@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions{
public string GetAntiXsrfRequestToken()
{
    return Xsrf.GetAndStoreTokens(Context).RequestToken;
}
}

并调用此 GetAntiXsrfRequestToken 函数来获取 javascript 中的值(位于 View 文件内)

headers:
{
    "RequestVerificationToken": '@GetAntiXsrfRequestToken()'
},