javascript - ejemplo - ¿Cómo incluir el token CSRF en los encabezados de la solicitud de carga de Dropzone?

dropzone laravel

Question

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 utilizo un beforeSend en ellos para adjuntar el token CSRF que tomo de la metaetiqueta así:

$.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 funciona. 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>&nbsp&nbsp<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>&nbsp&nbsp<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 intenté poner un ajaxSetup global en mi archivo principal así:

$.ajaxSetup({
headers: {
''X-CSRF-TOKEN'': $(''meta[name="token"]'').attr(''content'')
}
});

Todavía no está funcionando. ¿Qué estoy haciendo mal? ¿Cómo puedo pasar el token CSRF en el encabezado con la carga de dropzone para no obtener una excepción?

Answer 1

Puede agregar token csrf para cada solicitud de jquery ajax dentro de su aplicación con estos códigos.

$.ajaxSetup({
headers: {
''X-CSRF-Token'': $(''meta[name="_token"]'').attr(''content'')
}
});

Answer 2

Creo que la mejor manera de manejar esto es configurarlo de manera predeterminada para todas las publicaciones de Ajax (con jQuery) de acuerdo con los documentos de Django.

https://docs.djangoproject.com/en/1.8/ref/csrf/#ajax

function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '''') {
var cookies = document.cookie.split('';'');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + ''='')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie(''csrftoken'');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
function sameOrigin(url) {
// test that a given url is a same-origin URL
// url could be relative or scheme relative or absolute
var host = document.location.host; // host + port
var protocol = document.location.protocol;
var sr_origin = ''//'' + host;
var origin = protocol + sr_origin;
// Allow absolute or scheme relative URLs to same origin
return (url == origin || url.slice(0, origin.length + 1) == origin + ''/'') ||
(url == sr_origin || url.slice(0, sr_origin.length + 1) == sr_origin + ''/'') ||
// or any other URL that isn''t scheme relative or absolute i.e relative.
!(/^(////|http:|https:).*/.test(url));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && sameOrigin(settings.url)) {
// Send the token to same-origin, relative URLs only.
// Send the token only if the method warrants CSRF protection
// Using the CSRFToken value acquired earlier
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});

En tu ejemplo, tienes un error tipográfico al agregarlo a la publicación de Dropzone.js ajax.

''X-CSRF-Token''

debiera ser

''X-CSRFToken''

Answer 3

Podemos configurar el token CSRF en el encabezado de solicitud.

 xhr = open("POST",logURL,true);
//Set CSRF token in request header for prevent CSRF attack.
xhr.setRequestHeader(CSRFHeaderName, CSRFToken);

Answer 4

Está 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>&nbsp&nbsp<h4 class="display-inline"> (Or Click)</h4></span>'',
dictResponseError: ''Error uploading file!'',
headers: {
''X-CSRFToken'': $(''meta[name="token"]'').attr(''content'')
}
});

Así que, básicamente, necesitaba agregar el X-CSRFToken en el encabezado de la solicitud de Dropzone. Funciona como el encanto ahora.

Answer 5

Para cualquiera que use la configuración predeterminada de Laravel:

window.Laravel = {!! json_encode([
''csrfToken'' => csrf_token(),
]) !!};
Dropzone.options.attachments = {
url: ''upload'',
headers: {
''X-CSRF-TOKEN'': Laravel.csrfToken
}
}

Answer 6

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()
}
});