jquery - 使用 ASP.NET Core 和 JQuery 启用防伪 token

Question

我正在将 JQuery 与 ASP.NET Core 1.0.1 结合使用，并且进行 Ajax 调用:

$("#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) { });

到 ASP.NET Core 操作:

[HttpPost("messages")]
public async Task<IActionResult> Post([FromBody]MessagePostApiModelModel model) {
   // Send message
}

该表单位于共享 View 中，如下所示:

<form id="send-question" method="post">
  <textarea name="content"></textarea>
  <button class="button" type="submit">Enviar</button>
</form>

当我提交表单时，出现错误:

Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException: The required antiforgery header value "RequestVerificationToken" is not present.

如何通过 JQuery Ajax 调用启用 ASP.NET Core 的 AntiForgeryToken？

更新

我需要将以下 asp-controller 和 asp-action 添加到表单中:

<form asp-controller="QuestionApi" asp-action="Post" id="send-question" method="post">
</form>

这将生成防伪 token 。我需要手动将 token 添加到 JQuery 调用的 header 中，如下所示:

  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json",
    "RequestVerificationToken": $form.find("input[name='af_token']").val()
  },

有更好的方法吗？

当没有表单并且我只有一个 A 标签时，单击该标签时会进行 Ajax 调用，如何解决此问题？我可以在页面头部生成一个通用的防伪标记以供该页面的所有 ajax 调用使用吗？

Answer 1

mode777 的答案只需要一点小小的补充即可使其工作(我尝试过):

$(document).ajaxSend(function(e, xhr, options) {
    if (options.type.toUpperCase() == "POST") {
        var token = $form.find("input[name='af_token']").val();
        xhr.setRequestHeader("RequestVerificationToken", token);
    }
});

实际上，如果你也使用Ajax提交，则根本不需要使用表单。将其放入您的 _layout 中:

 <span class="AntiForge"> @Html.AntiForgeryToken() </span>

然后，您可以通过将其添加到您的 JavaScript 中来获取 token :

$(document)
   .ajaxSend(function (event, jqxhr, settings) {
        if (settings.type.toUpperCase() != "POST") return;
        jqxhr.setRequestHeader('RequestVerificationToken', $(".AntiForge" + " input").val())
})

@HtmlAntiForgeryToken 生成带有防伪标记的隐藏输入字段，与使用表单时相同。上面的代码使用类选择器来选择范围，然后获取其中的输入字段以收集 token 并将其添加为 header 。