如何在Dropzone上传请求的标头中包含CSRF令牌? [英] How to include the CSRF token in the headers in Dropzone upload request?
问题描述
我正在开发一个单页应用程序,并且正在使用Laravel 5进行Web服务.
I am working on a single page application and I am using Laravel 5 for the web service.
所有表单都是异步提交的,我在它们上使用了一个beforeSend来附加从meta标记中获取的CSRF令牌,如下所示:
All forms are submitted asynchronously and I use a beforeSend on them to attach the CSRF token which I take from the meta tag like so:
$.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){
}
});
我所有的表单都可以正常工作,但dropzone上传不起作用.它给了我一个TokenMismatchException
异常.这是我用来更新个人资料照片的dropzone代码:
All my forms work fine but dropzone upload doesn't. It gives me back a TokenMismatchException
exception. Here is my dropzone code to update the profile photo:
$("#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
放在这里:
I have tried putting the beforeSend
in here too:
$("#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'));
},
});
我还试图将全局ajaxSetup放在主文件中,如下所示:
I have also tried to put a global ajaxSetup in my main file like so:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
}
});
它仍然无法正常工作.我究竟做错了什么?如何在带有dropzone上传的标头中传递CSRF令牌,以免发生异常?
It is still not working. What am I doing wrong? How can I pass the CSRF token in the header with the dropzone upload so as to not a get an exception?
推荐答案
好的,这段代码现在可以正常工作了:
Okay so this code is working just fine now:
$("#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')
}
});
所以基本上我需要在Dropzone请求的标头中添加X-CSRFToken
.现在就像魅力一样.
So basically I needed to add the X-CSRFToken
in the header of the Dropzone request. Works like charm now.
这篇关于如何在Dropzone上传请求的标头中包含CSRF令牌?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!