Error encountered when AJAX/ASP.NET Core MVC/DevExtreme POST back results in a faulty URL (Error/Error?code=22)

Question

Error encountered when AJAX/ASP.NET Core MVC/DevExtreme POST back results in a faulty URL (Error/Error?code=22)

Incorporating Ajax into my MVC application allows me to initiate a POST request when the user clicks on the logout button. The goal is to redirect the user back to the Login page and route them to the HttpPost method in the controller. However, I encounter an error when attempting to log out using 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;

           ...

javascript ajax asp.net-mvc asp.net-core devextreme

Answer 1

Answer №1

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

Your code includes the use of the ValidateAntiForgeryToken attribute to prevent forgery of a request. If you are making JQuery Ajax calls to the method above, make sure to include the RequestVerificationToken in the request header.

To configure the antiforgery service in the Startup.ConfigureServices method:

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

In the Login.cshtml page, within the Ajax beforeSend function, set the 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>
}

You can now access the action method via Ajax as shown in this screenshot:

https://i.sstatic.net/E5QLf.gif

If you remove the ValidateAntiForgeryToken attribute in the controller, you won't need to set the RequestVerificationToken in the request header anymore.

Modified code without ValidateAntiForgeryToken attribute:

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

JQuery script for the updated code:

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

For more information on preventing Cross-Site Request Forgery attacks in ASP.NET Core, refer to this resource: Prevent Cross-Site Request Forgery (XSRF/CSRF) attacks in ASP.NET Core

Answer 2

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

Your code includes the use of the ValidateAntiForgeryToken attribute to prevent forgery of a request. If you are making JQuery Ajax calls to the method above, make sure to include the RequestVerificationToken in the request header.

To configure the antiforgery service in the Startup.ConfigureServices method:

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

In the Login.cshtml page, within the Ajax beforeSend function, set the 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>
}

You can now access the action method via Ajax as shown in this screenshot:

https://i.sstatic.net/E5QLf.gif

If you remove the ValidateAntiForgeryToken attribute in the controller, you won't need to set the RequestVerificationToken in the request header anymore.

Modified code without ValidateAntiForgeryToken attribute:

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

JQuery script for the updated code:

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

For more information on preventing Cross-Site Request Forgery attacks in ASP.NET Core, refer to this resource: Prevent Cross-Site Request Forgery (XSRF/CSRF) attacks in ASP.NET Core

Answer 3

Answer №2

Please ensure that your ajax URL is correctly configured:

  url:  "/MyApp/Account/Login",

I am not able to retrieve any data from your ajax request.

Answer 4

Please ensure that your ajax URL is correctly configured:

  url:  "/MyApp/Account/Login",

I am not able to retrieve any data from your ajax request.

Error encountered when AJAX/ASP.NET Core MVC/DevExtreme POST back results in a faulty URL (Error/Error?code=22)

Answer №1

Answer №2

Similar questions

Building a JavaScript application with Node.js and MySQL to seamlessly interact with both offline and online databases

Popup notification system using AJAX and jQuery for Facebook likes

Use error list substitution as opposed to adding Json

Issues with React Material UI Dialog Displaying Incorrect Information

Utilize JavaScript API for generating and retrieving XSD schema and XML documents

Working with multi-line HTML content within Javascript

Navigating the realm of JavaScript and managing the uncertainties of floating point precision

I seem to be experiencing some confusion with labeling in my pie chart and doughnut chart using Chart.js. Additionally, I am unable to properly display the charts themselves

Leveraging Ninject for MongoDB: Efficient Dependency Resolution for Repository

Utilizing Inquiries within Arrays

A guide on retrieving query string parameters from a URL

If the variable is not defined, then utilize a different one

Using jQuery's .text() function transforms my h1 element into regular text once a number is inputted

Revamp a dynamically generated class using ajax

Sending a result back to a Silverlight user control from a slightly intricate JavaScript function

Is there a simple method to extract all components from an SVG document and insert them into an HTML text box?

Creating an accordion using an array in JavaScript: A step-by-step guide

Is it possible to use Ajax to upload images on a website?

Pass the most recent properties to the mousemove event handler

How can I improve the efficiency of my ajax requests in jQuery using PHP and