Laravel 5 - Загрузка изображения AJAX с защитой CSRF

Question

У меня есть форму, созданная для загрузки изображения. Я ранее использовал DropZone.js, который отлично работал и отправил токен CSRF вместе с вызовом ajax. Все серверная сторона в порядке, но при попытке сделать это без DropZone я получаю ошибки несоответствия токенов.

Это мой AJAX вызов:

$(document).on('submit', ".hidden-image-upload", function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url:'/project/uploadImage', 
     data:{ 
      data:new FormData($("#upload_form")[0]), 
     }, 
     dataType:'json', 
     async:false, 
     type:'post', 
     processData: false, 
     contentType: false, 
     success:function(response){ 
      console.log(response); 
     }, 
    }); 
}); 

И это HTML:

<form method="POST" action="http://localhost/project/create" accept-charset="UTF-8" class="hidden-image-upload"> 
    <input name="_token" type="hidden" value="5lgtt8AgbeF3lprptj8HNXVPceRhoJbqBeErBI1k"> 
    <input class="cover-image-upload-button" name="file" type="file"> 
</form> 

Как я могу идти о сортировке мой AJAX вызов/Laravel работать вместе?

Answer 1

Вы можете отправить токен в заголовках, используя $ .ajax.

$(document).on('submit', ".hidden-image-upload", function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     url:'/project/uploadImage', 
     data:{ 
      data:new FormData($("#upload_form")[0]), 
     }, 
     headers: { 
      'X-CSRF-Token': $('form.hidden-image-upload [name="_token"]').val() 
     } 
     dataType:'json', 
     async:false, 
     type:'post', 
     processData: false, 
     contentType: false, 
     success:function(response){ 
      console.log(response); 
     }, 
    }); 
}); 

В худшем случае, отключить проверку CSRF в этом маршруте, просто добавить маршрут в массиве $ за исключением внутри приложения/Http/Промежуточное/VerifyCsrfToken.php

Answer 2

Попробуйте это. Вы также должны передать свой токен CSRF вместе с вашим FormData:

$(document).on('submit', ".hidden-image-upload", function(e){ 
e.preventDefault(); 

var data = new FormData($("#upload_form")[0]); 
    data.append('_token', $('input[name="token"]').val()); 

$.ajax({ 
    url:'/project/uploadImage', 
    data:{ 
     data: data, 
    }, 
    dataType:'json', 
    async:false, 
    type:'post', 
    processData: false, 
    contentType: false, 
    success:function(response){ 
     console.log(response); 
    }, 
}); 

});