I am using JQuery with ASP.NET Core 1.0.1 and I have the Ajax call:
$("#send-message").on("submit", function (event) {
event.preventDefault();
var $form = $(this);
$.ajax({
url: "api/messages",
data: JSON.stringify($form.serializeToJSON()),
dataType: "json",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
type: "post"
})
.done(function (data, status, xhr) { })
.fail(function (xhr, status, error) { });
To the ASP.NET Core action:
[HttpPost("messages")]
public async Task<IActionResult> Post([FromBody]MessagePostApiModelModel model) {
// Send message
}
The form is in a shared view and it is the following:
<form id="send-question" method="post">
<textarea name="content"></textarea>
<button class="button" type="submit">Enviar</button>
</form>
When I submit the form I get the error:
Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException: The required antiforgery header value "RequestVerificationToken" is not present.
How can I enable ASP.NET Core's AntiForgeryToken with JQuery Ajax calls?
UPDATE
I need to add the following asp-controller and asp-action to the form:
<form asp-controller="QuestionApi" asp-action="Post" id="send-question" method="post">
</form>
This will generate the antiforgery token. And I needed to manually add the token to the headers of the JQuery call as follows:
headers: {
"Accept": "application/json",
"Content-Type": "application/json",
"RequestVerificationToken": $form.find("input[name='af_token']").val()
},
Is there a better way to do this?
How do solve this when there is not form and I have only an A tag that when clicked makes the Ajax call? Can I generate a common antiforgery token on my page head to be used by all ajax calls from that page?
mode777's answer just needs a small addition to make this work (I tried it):
Actually, if you also submit using Ajax, you don't need to use a form at all. Put this in your _layout:
Then you pickup the token by adding this to your javascript:
The @HtmlAntiForgeryToken generates a hidden input field with the antiforgery token, the same as when using a form. The code above finds it using the class selector to select the span, then gets the input field inside that to collect the token and add it as a header.
In addition to ygoe's answer, if you want to pass a XSRF token as a header, e.g.
X-XSRF-Token
:then you will also need to specify the respective antiforgery option:
Then you can use the standard
ValidateAntiForgeryToken
attribute to validate the request:In Asp.Net Core you can request the token directly, as documented:
And use it in javascript:
You can add the recommended global filter, as documented:
Note: This answer applies to ASP.NET Core 2.0. It may not fit to older versions.
Here's what I've done after digging through aspnet's source code for a short while:
You can use it in a view like this:
You might modify the extension method to return the name of the field as well, in any form you wish, e. g. a JSON fragment.
You can register a global ajax event that will add the header to all ajax calls that are not GET by this: