The required anti-forgery form field “__RequestVerificationToken” is not present on $.post

Question

Currently I am having a problem with my AntiForgeryToken not being present in my post call but for all I know, it is actually there.

Since I don't use a form to get the data from my HTML but just input fields I made a empty form on the bottom of my page using:

@using (Html.BeginForm(null, null, FormMethod.Post, new { id = 
"__AjaxAntiForgeryForm" }))
{
    @Html.AntiForgeryToken()
}

This results in a AntiForgeryToken that I can get using jQuery.

so in my Javascript I do:

                        var LoginData = {
                            EmailAddress: currentMail,
                            Password: password
                        }
                        var form = $('#__AjaxAntiForgeryForm');
                        var token = $('input[name="__RequestVerificationToken"]', form).val();

                        data = {
                            __RequestVerificationToken: token,
                            LoginData: LoginData
                        }

                        $.post(window.location,
                            {
                                scController: '*Controller*',
                                scAction: 'ValidateLogin',
                                data: data
                            }).done(function (d, e) { 
                                console.log("done");
                                console.log(d);
                                console.log(e);
                            }).fail(function (d, e) {
                                console.log("error");
                                console.log(d);
                                console.log(e);
                            });

The data object that I create results in:

{LoginData: {EmailAddress: "********", Password: "*******"}, __RequestVerificationToken: "Imagine a token here"}

And then my controller action:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ResultMessage ValidateLogin(LoginData login)
    {
        return _userRepository.Login(login);
    }

For some reason when I try to do this post I get this error:

"The required anti-forgery form field "__RequestVerificationToken" is not present."

What am I doing wrong?

EDIT 1: I see that the __RequestVerificationToken in the Cookie header is different than the one I send with the data. How can this be?

Answer 1

As stated here https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/preventing-cross-site-request-forgery-csrf-attacks , when used with ajax, the anti-forgery token must be sent in the headers like this:

$.ajax("api/values", {
    type: "post",
    contentType: "application/json",
    data: {  }, // JSON data goes here
    dataType: "json",
    headers: {
        'RequestVerificationToken': <Token>
    }
});

Answer 2

Here is my step-by-step approach on this issue. I am using angularJS, jquery, ASP.NET MVC 5 https://stackoverflow.com/a/57781976/2508781

Use of MVC's AntiForgery.Validate() does the magic of validating the value of antiforgery token here and is wonderful so far. Hope this helps!