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> 

당신이이 질문을 한 지 오래 되었더라도 이것이 도움이되기를 바랍니다!