如何在 Dropzone 上传请求的标头中包含 CSRF 令牌？

Question

我正在开发单页应用程序，并且正在使用 Laravel 5 作为 Web 服务。

所有表单都是异步提交的，我在它们上使用 beforeSend 来附加我从元标记中获取的 CSRF 令牌，如下所示：

 $.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 upload 不行。它返回给我一个 TokenMismatchException 异常。这是我用于更新个人资料照片的 dropzone 代码：

 $("#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 放在这里：

 $("#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'));
    },
});

我还尝试将全局 ajaxSetup 放在我的主文件中，如下所示：

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

它仍然无法正常工作。我究竟做错了什么？如何通过 dropzone 上传在标头中传递 CSRF 令牌，以免出现异常？

原文由 Rohan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好的，这段代码现在可以正常工作了：

 $("#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-CSRF-TOKEN': $('meta[name="token"]').attr('content')
    }
});

所以基本上我需要在 Dropzone 请求的标头中添加 X-CSRFToken 。现在像魅力一样工作。

原文由 Rohan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用这些代码为应用程序中的每个 jquery ajax 请求添加 csrf 令牌。

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

原文由 Nyan Lynn Htut 发布，翻译遵循 CC BY-SA 3.0 许可协议