javascript - 使用 AJAX 调用获取表单时使用 AntiForgeryToken？

Question

----------------更新，向下滚动原始问题--------------------

$.ajax 调用中的这两个设置(我根本没有注意到)对我来说是错误的:

contentType: false,
processData: false

当删除这 2 个设置并在 PartialView 中生成 AntiForgeryToken 时，动态生成的表单中带有 AntiForgeryTokens 的 Ajax 帖子工作正常，如 Stephen Muecke 的评论所述。成功的 $.ajax 调用看起来像这样，其中 __RequestVerificationToken 来自局部 View 中对 @HtmlAntiForgeryToken() 的调用:

$.ajax({
    url: '/MyUrl',
    type: "POST",
    data: {__RequestVerificationToken: $('input[name="__RequestVerificationToken"]').val()
          },
    success: function (responseText) {
    ...and etc

------------下面是原始问题-------------------------------- --------

是否可以在通过 ajax 调用动态加载的表单上使用 AntiForgeryToken？

在我的 asp.net mvc 应用程序中，我使用的是 Jquery 选项卡。当页面加载时，我只加载第一个选项卡。第一个选项卡始终包含一个表单，并且此表单始终包含一个 AntiForgeryToken。其他选项卡是延迟加载的，当用户选择它们时通过 ajax 调用。

如果我从第一个选项卡回发(使用表单提交或 ajax 发布)，我在 Controller 方法上使用 ValidateAntiForgeryToken，它工作正常。我可以回发整个表单，或将 __RequestVerificationToken 隐藏输入的值附加到正在发布的数据中。这两种方法都适用于第一个选项卡。

当我从任何其他选项卡发帖时出现问题。

如果用户选择任何其他选项卡，这会触发一个 javascript 方法，该方法依次对 Controller 方法进行 ajax GET 调用，后者又返回一个 PartialView。此 PartialView 包含一个表单。在 ajax GET 调用的成功事件中，我通过调用 jquery html() 显示 Controller 方法返回的 html。然后，我通过 $.validator.unobtrusive.parse 传递动态生成的表单，以便我可以使用非侵入式验证。所有这一切都很好。

唯一的问题是，当我从这个动态生成的表单发回服务器时，我想用 ValidateAntiForgeryToken 属性修饰 Controller 方法。唉，当我这样做时，我得到了一个 HttpAntiForgeryException。

我已经尝试在动态生成的表单中(即在 PartialView 中)包含 @Html.AntiForgeryToken() 调用。这会生成预期的 __RequestVerificationToken 隐藏输入，但当我将此值传回 Controller 时，它会导致 HttpAntiForgeryException。

我还尝试从第一个选项卡中获取 __RequestVerificationToken，认为这可能是 Controller “期望的”。唉，这也会导致 HttpAntiForgeryException。

当我从这些延迟加载的 ajax 生成的表单之一回发时，有什么方法可以使用 AntiForgeryToken/ValidateAntiForgeryToken 吗？

Answer 1

绝对可能，通过动态序列化表单数据以在每次 Ajax 调用时传递 AntiForgeryToken 来完成。

var data = $('#yourForm').serialize();
$.ajax({
    type: 'POST',
    url: "@Url.Action("yourMethod", "yourController")",
    data: data,
    cache: false,
    success: function (response) {
        // Your code here
    }
});

使用 Chrome 中的 Network 选项卡，您将看到 token 已附加到 Ajax 调用。如果您在您的方法中放置一个断点，您应该会看到您实际上能够进入。