Estoy trabajando en una aplicación de una sola página y estoy usando Laravel 5 para el servicio web.
Todos los formularios se envían de forma asíncrona y uso beforeSend para adjuntar el token CSRF que tomo de la metaetiqueta de la siguiente manera:
$.ajax({ url: '/whatever/route', type: 'POST', dataType: 'JSON', data: $('form#whatever-form').serialize(), beforeSend: function(request) { return request.setRequestHeader('X-CSRF-Token', $("meta[name='token']").attr('content')); }, success: function(response){ rivets.bind($('#whateverTag'), {whateverData: response}); }, error: function(response){ } }); Todos mis formularios funcionan bien, pero la carga de dropzone no. Me devuelve una excepción TokenMismatchException . Aquí está mi código dropzone para actualizar la foto de perfil:
$("#mydropzone").dropzone({ url: "/profile/update-photo", addRemoveLinks : true, maxFilesize: 5, dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>  <h4 class="display-inline"> (Or Click)</h4></span>', dictResponseError: 'Error uploading file!' }); He intentado poner el beforeSend aquí también:
$("#mydropzone").dropzone({ url: "/profile/update-photo", addRemoveLinks : true, maxFilesize: 5, dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>  <h4 class="display-inline"> (Or Click)</h4></span>', dictResponseError: 'Error uploading file!', beforeSend: function(request) { return request.setRequestHeader('X-CSRF-Token', $("meta[name='token']").attr('content')); }, });También he intentado poner un ajaxSetup global en mi archivo principal así:
$.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="token"]').attr('content') } });Todavía no funciona. ¿Qué estoy haciendo mal? ¿Cómo puedo pasar el token CSRF en el encabezado con la carga de la zona de caída para no obtener una excepción?
Bien, entonces este código está funcionando bien ahora:
$("#mydropzone").dropzone({ url: "/profile/update-photo", addRemoveLinks : true, maxFilesize: 5, dictDefaultMessage: '<span class="text-center"><span class="font-lg visible-xs-block visible-sm-block visible-lg-block"><span class="font-lg"><i class="fa fa-caret-right text-danger"></i> Drop files <span class="font-xs">to upload</span></span><span>  <h4 class="display-inline"> (Or Click)</h4></span>', dictResponseError: 'Error uploading file!', headers: { 'X-CSRF-TOKEN': $('meta[name="token"]').attr('content') } }); Básicamente, necesitaba agregar el X-CSRFToken en el encabezado de la solicitud de Dropzone. Funciona como el encanto ahora.
Puede agregar un token csrf para cada solicitud de jquery ajax dentro de su aplicación con este código.
$.ajaxSetup({ headers: { 'X-CSRF-Token': $('meta[name="_token"]').attr('content') } });Esto también funciona bastante bien:
$("#mydropzone").dropzone({ url: "/profile/update-photo", addRemoveLinks : true, maxFilesize: 5, dictResponseError: 'Error uploading file!', headers: { 'X-CSRF-Token': $('input[name="authenticity_token"]').val() } });