Dropzone CSRF令牌不匹配Laravel 5答案

【问题标题】：Dropzone CSRF token mismatch Laravel 5Dropzone CSRF令牌不匹配Laravel 5
【发布时间】：2016-10-15 11:48:07
【问题描述】：

我正在使用 Dropzone 使用 Laravel 5 上传图像。在 Dropzone 对我的 URL 进行 put 调用后，我收到以下错误：

VerifyCsrfToken.php 第 67 行中的 TokenMismatchException：

但是，当我查看请求的有效负载时，令牌存在：

------WebKitFormBoundary91A7BYrMsDcGTEvx 内容处置：表单数据； name="_method"

放 ------WebKitFormBoundary91A7BYrMsDcGTEvx 内容处置：表单数据； name="_token"

j3NbjibYF7k8g2w1P0enw6YVfDrDvCGKFMCFt4NX ------WebKitFormBoundary91A7BYrMsDcGTEvx 内容处置：表单数据；名称="标题"

这是我的 JS：

    Dropzone.options.realDropzone = {
        url: '/user/manage/10',
        method: 'PUT',
        paramName: 'file',
        uploadMultiple: false,
        parallelUploads: 100,
        previewsContainer: '#dropzonePreview',
        addRemoveLinks: true,
        maxFiles: 10,
        autoProcessQueue: false,

        init: function () {
            var dropZone = this;

            this.element.querySelector("#save").addEventListener("click", function (e) {
                e.preventDefault();
                e.stopPropagation();

                console.log("clicked submit");
                dropZone.processQueue();
            });
        },
    };

我的表格：

{!! Form::model($asset, ['method' => 'PUT', 'class' => 'dropzone', 'id' => 'real-dropzone', 'action' => ['UserManagementController@update', $asset->id], 'file' => true]) !!}

我的控制器：

   public function update(Request $request, $id)
    {

        return dd(FileRequest::file('file'));
    }

【问题讨论】：

所以我刚刚发现，当我使用 Dropzone 提交请求时，没有数据发送到我的控制器，这就是我得到令牌不匹配的原因。任何想法为什么 dropzone 没有提交整个表单？

标签： laravel laravel-5.2 csrf laravel-5.5 dropzone.js

【解决方案1】：

尝试在 Dropzone 选项中添加令牌：

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

【讨论】：

太棒了！我正在将 Dropzone 整合到我的正常形式中。我在过去 2 天遇到了同样的问题，现在在第 3 天，我阅读了您的答案，它简单地解决了我的问题。谢谢

【解决方案2】：

您可以在表单中添加{{ csrf_field() }}

【讨论】：

对不起，如果在vue组件里面呢？
这里有更多内容stackoverflow.com/questions/45523101/…

【解决方案3】：

我的 Laravel 5.6 工作代码：

HTML

<div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>

jQuery

Dropzone.autoDiscover = false;
$(document).ready(function() {
    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
    $("div#my-awesome-dropzone").dropzone({
        url: "{{ url('/upload') }}",
        headers: {
            'x-csrf-token': CSRF_TOKEN,
        },
    });
});

【讨论】：

【解决方案4】：

刀片文件中的 HTML 代码

<head>
    …
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
    <div class="dropzone" id="my-dropzone"></div>
</body>

JavaScript

Dropzone.autoDiscover = false;
new Dropzone('#my-dropzone', {
    url: '/upload',
    headers: {
        'x-csrf-token': document.head.querySelector('meta[name="csrf-token"]').content,
    },
});

【讨论】：