AJAX/ASP.NET Core MVC/DevExtreme POST 返回错误的 url (Error/Error?code=22)

Question

当您单击注销按钮时，我在我的 MVC 应用程序中使用 Ajax 发送回一个 POST。我想将用户发送回登录页面并将它们路由到控制器中的 HttpPost 方法。但是，在我的 Ajax 代码中，当我单击注销时出现错误：This localhost page can’t be found No webpage was found for the web address: http://localhost/myApp/Error/Error?code=22

PageHeader.cshtml

...
 items.Add()
        .Widget(w => w
        .Button()
        .Type(ButtonType.Normal)
        .StylingMode(ButtonStylingMode.Text)
        .Text("Logout")
        .ID("logoutbutton")
        .OnClick("logoutOnClick")
            )
            .CssClass("toolbar-button")
            .LocateInMenu(ToolbarItemLocateInMenuMode.Auto)
            .Location(ToolbarItemLocation.After);
    })
    )
...
<script type="text/javascript">
        function logoutOnClick () {
            if (confirm('Are you sure you want to logout?')) {
                $.ajax({
                    type: "POST",
                    url: '@Url.Action("Login", "Account")'
                    
                });
            }
        }
</script>

AccountController.cs

...
        [HttpGet]
        public IActionResult Login() { return View(new LoginModel()); }

     
        [HttpPost, ValidateAntiForgeryToken]
        public IActionResult Login(LoginModel userModel)
        {
            bool? isAuthenticated = false;

           ...

Answer 1

    [HttpPost, ValidateAntiForgeryToken]
    public IActionResult Login(LoginModel userModel)

根据您的代码，因为您使用 ValidateAntiForgeryToken 属性来防止请求伪造。在使用 JQuery Ajax 调用上述方法时，还应在请求头中添加 RequestVerificationToken。

在Startup.ConfigureServices方法中，配置防伪服务：

        //configure the antiforgery service to look for the X-CSRF-TOKEN header. To prevent the cross-site request forgery.
        services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");  

然后，在 Login.cshtml 页面中，在 Ajax beforeSend 函数中，设置 RequestVerificationToken：

@model WebApplication6.Models.LoginModel
 
<div class="row">
    <div class="col-md-4">
        <form asp-action="Login">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            ...
            <div class="form-group">
                <input type="button" value="Create" id="btnCreate" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}

    <script>
        $(function () {
            $("#btnCreate").click(function () { 
                $.ajax({
                    url: '/Account/Login',
                    type: 'Post',
                    beforeSend: function (xhr) {
                        xhr.setRequestHeader("XSRF-TOKEN",
                            $('input:hidden[name="__RequestVerificationToken"]').val());
                    },
                    data: { "UserName": "AA", "Password": "pass" },
                    success: function (result) {
                        alert("sucess");
                    },
                    error: function (xhr, status) {
                        alert(status);
                    }
                });
            });
        })
    </script>
}

然后，我们可以通过Ajax访问action方法，截图如下：

另外，你也可以去掉控制器中的ValidateAntiForgeryToken属性，这样就不需要在请求头中设置RequestVerificationToken了。

这样的代码：

    [HttpPost]
    public IActionResult Login(LoginModel userModel)
    {
        bool? isAuthenticated = false;
        return View();
    }

jQuery 脚本：

        $.ajax({
                url: '/Account/Login',
                type: 'Post', 
                data: { "UserName": "AA", "Password": "pass" },
                success: function (result) {
                    alert("sucess");
                },
                error: function (xhr, status) {
                    alert(status);
                }
            });

参考：Prevent Cross-Site Request Forgery (XSRF/CSRF) attacks in ASP.NET Core

Answer 2

你必须修复 ajax url：

  url:  "/MyApp/Account/Login",

而且我看不到任何数据：在你的 ajax 中