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

Question

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

41

我正在开发一个单页应用程序，使用 Laravel 5 提供 Web 服务。所有表单都是异步提交的，我使用 beforeSend 在表单上附加 CSRF 令牌，该令牌从 meta 标签中获取，如下所示：

$.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 代码：

$("#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

你写了“Dropbox”，但我在你的问题中没有看到任何与Dropbox相关的内容。也许你想说的是Dropzone？我现在会先删除Dropbox标签。 - user94559

谢谢您提醒我。那真是太愚蠢了。 - Rohan

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Grant · Answer 1

其他答案似乎都没有指出您首先需要将元标记添加到您的布局 blade 文件中，这可能是因为默认的 blade 布局文件已经有了它，但为了方便起见，可以按照以下方式添加：

<meta name="csrf-token" content="{{ csrf_token() }}">

然后您可以在 Dropzone 调用的参数中引用 X-CSRF-TOKEN 标头：

Dropzone.autoDiscover = false;
jQuery(document).ready(function($) {
  $("div#uploader").dropzone({ 
        headers: { 
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }, 
        paramName: 'attachment', 
        url: "/upload/path"
  });
});

- kiran · Answer 2

我们可以在请求头中设置CSRF令牌。

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

- Bruno · Answer 3

使用Laravel 9，将此方法附加到配置字段...对我来说运行得很好！

 sending: function(file, xhr, formData) {
        formData.append("_token", "{{ csrf_token() }}");
    },

从Dropzone CSRF token mismatch Laravel 5