如何使用Ajax文件上傳發送防偽標記？

Question

我正在嘗試使用ajax調用上傳文件並驗證防偽令牌。 我已經瀏覽過並構建了一種方法來驗證控制器上的防偽標記。 但是，每當我在視圖上有@Html.AntiForgeryToken時，我的文件就不會被填充。 即使它驗證了防偽令牌。 似乎沒有收到請求，但我不確定為什么。

ajaxSendOverride：

$(document).ready(function () {

    var securityToken = $('[name=__RequestVerificationToken]').val();

    $(document).ajaxSend(function (event, request, opt) {
        if (opt.hasContent && securityToken) {   // handle all verbs with content

            var tokenParam = "__RequestVerificationToken=" + encodeURIComponent(securityToken);

            opt.data = opt.data ? [opt.data, tokenParam].join("&") : tokenParam;

            // ensure Content-Type header is present!
            if (opt.contentType !== false || typeof event.contentType !== 'undefined') {
                request.setRequestHeader("Content-Type", opt.contentType);
            }
        }
    });
});

阿賈克斯：

$(document).on("submit", "[data-upload-contract-form]", function (e) {
        e.preventDefault();
        var formData = new FormData($('[data-upload-contract-form]')[0]);
        if ($('[data-upload-file]').val() != "") {
            $.ajax({
                url: $(this).attr('action'),
                data: formData,
                type: 'POST',
                processData: false,
                contentType: false,
                headers: {
                    '__RequestVerificationToken': $('[name=__RequestVerificationToken]').val()
                },
                success: function (data) {
                    if (data.Success === true) {
                        $('[data-contract-error-message]').text();
                        ReturnDataTableForUploadFile($('[data-upload-file-supplier-contract-id]').val());
                        table.ajax.reload();
                    }
                    else {
                        $('[data-contract-error-message]').show();
                        $('[data-contract-error-message]').text(data.ResponseText);
                    }
                }
            })
            .fail(function () {
                $('[data-contract-error-message]').show();
                $('[data-contract-error-message]').text("Something went wrong uploading your file, please try again.");
            });
        }
        else {
            $('[data-contract-error-message]').show();
            $('[data-contract-error-message]').text("No contract to upload");
        }
    });

驗證：

 public sealed class AuthorizeAntiForgeryToken : System.Web.Mvc.FilterAttribute, System.Web.Mvc.IAuthorizationFilter
    {
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            var httpContext = filterContext.HttpContext;
            var cookie = httpContext.Request.Cookies[AntiForgeryConfig.CookieName];
            AntiForgery.Validate(cookie != null ? cookie.Value : null,
                                 httpContext.Request.Headers["__RequestVerificationToken"]);
        }
    }

控制器：

 public async Task<JsonResult> UploadContract(UploadContract model)
        {
            if (ModelState.IsValid)
            {
                try
                {
                    foreach (var item in model.Contracts)
                    {
                        string filePath = WebConfigurationManager.AppSettings["SupplierContractPath"] + GetSelectedClientId() + "\\" + item.FileName;

                        _supplierFileManager.UploadFile(item, filePath);

                        await _supplierFileManager.SaveContractToDatabase(model.SupplierContractID, item.FileName);
                    }
                    return Json(new { Success = true });
                }
                catch (Exception e)
                {
                    return Json(new { Success = false, ResponseText = e.Message });
                }
            }
            else
            {
                string errorMessage = "";
                foreach (var item in ModelState.Values.SelectMany(r => r.Errors))
                {
                    errorMessage += "<p>" + item.ErrorMessage + "</p>";
                }
                return Json(new { Success = false, ResponseText = errorMessage });
            }
        }

如何使用防偽令牌發送我的文件？

Answer 1

我今天遇到了這個問題而沒有回答就遇到了這個問題。 其他答案的鏈接不起作用，但過了一段時間我找到了解決方案。

防偽令牌必須位於表單字段中，而不是標題中。 它也必須是表單數據中的第一個字段。 所以要解決它，做：

$(document).on("submit", "[data-upload-contract-form]", function (e) {
        e.preventDefault();
        var formData = new FormData();
        formData.append('__RequestVerificationToken', $('[name=__RequestVerificationToken]').val());
        formData.append('file', $('[data-upload-contract-form]')[0]);
        if ($('[data-upload-file]').val() != "") {
            $.ajax({
                url: $(this).attr('action'),
                data: formData,
                type: 'POST',
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data.Success === true) {
                        $('[data-contract-error-message]').text();
                        ReturnDataTableForUploadFile($('[data-upload-file-supplier-contract-id]').val());
                        table.ajax.reload();
                    }
                    else {
                        $('[data-contract-error-message]').show();
                        $('[data-contract-error-message]').text(data.ResponseText);
                    }
                }
            })
            .fail(function () {
                $('[data-contract-error-message]').show();
                $('[data-contract-error-message]').text("Something went wrong uploading your file, please try again.");
            });
        }
        else {
            $('[data-contract-error-message]').show();
            $('[data-contract-error-message]').text("No contract to upload");
        }
    });

我自己的功能（使用jQuery）工作正常:(它不完整，但至少報告它收到文件;））

<script type="text/javascript">
    function uploadFileThroughForm(messageId) {
        var form = $('#addAttachmentForm');
        if (form.valid()) {
            var files = $('#filenameToUpload').prop('files');
            if (files.length > 0) {
                if (window.FormData !== undefined) {
                    var formData = new FormData();
                    formData.append("__RequestVerificationToken", $('#addAttachmentForm input[name=__RequestVerificationToken]').val());
                    formData.append("file", files[0]);
                    $.ajax({
                        type: "POST",
                        url: '@ApplicationAdapter.GetVirtualRoot()Attachment/Add/' + messageId,
                        contentType: false,
                        processData: false,
                        data: formData,
                        success: function(result) {
                            alert(result.responseMessage);
                        },
                        error: function(xhr) {
                            alert(xhr.responseText);
                        }
                    });
                } else {
                    alert("This browser doesn't support HTML5 file uploads!");
                }
            }
        }
    }
</script>

希望這會有所幫助，即使你問這個問題已經有一段時間了！