Laravel TokenMismatchException 和 dropzone答案

【问题标题】：Laravel TokenMismatchException and dropzoneLaravel TokenMismatchException 和 dropzone
【发布时间】：2023-04-06 23:23:01
【问题描述】：

我正在尝试通过 dropzone 上传图片，但即使我在任何需要的地方添加了 csrf 令牌，我也收到令牌不匹配错误，我变得非常绝望......

我的表单

{!! Form::open(['route' => 'photo.upload', 'id' => 'hello', 'method' => 'POST', 'class' => 'dropzone no-margin dz-clickable']) !!}
    <div class="dz-default dz-message"><span>Drop files here to upload</span></div></form>
{!! Form::close() !!}

我的脚本

Dropzone.autoDiscover = false;

Dropzone.options.hello = {
    paramName: "file", // The name that will be used to transfer the file
    maxFilesize: 5, // MB
    parallelUploads: 2, //limits number of files processed to reduce stress on server
    addRemoveLinks: true,
    headers: {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content'),
    },
    accept: function(file, done) {
        // TODO: Image upload validation
        done();
    },
    sending: function(file, xhr, formData) {

        // Pass token. You can use the same method to pass any other values as well such as a id to associate the image with for example.
        formData.append("_token", $('input[name="_token"]').val() ); // Laravel expect the token post value to be named _token by default
    },
    init: function() {
        this.on("success", function(file, response) {
            // On successful upload do whatever :-)
        });
    }
};

// Manually init dropzone on our element.
var myDropzone = new Dropzone("#hello", {
    url: $('#hello').attr('action')
});

请求标头

...
X-CSRF-Token:P4wc9NVVZJe1VjalPwO6d6WQXZ9eEqPd84ICpToG
...

请求负载

------WebKitFormBoundarySKMUFNO6dbgzeQVK
Content-Disposition: form-data; name="_token"

P4wc9NVVZJe1VjalPwO6d6WQXZ9eEqPd84ICpToG
------WebKitFormBoundarySKMUFNO6dbgzeQVK
Content-Disposition: form-data; name="_token"

P4wc9NVVZJe1VjalPwO6d6WQXZ9eEqPd84ICpToG
------WebKitFormBoundarySKMUFNO6dbgzeQVK
Content-Disposition: form-data; name="file"; filename="Screen Shot 2016-01-14 at 18.27.40.png"
Content-Type: image/png


------WebKitFormBoundarySKMUFNO6dbgzeQVK--

当我查看生成的表单时，有 csrf 字段

<input name="_token" type="hidden" value="P4wc9NVVZJe1VjalPwO6d6WQXZ9eEqPd84ICpToG">

您知道为什么即使我将 crsf 令牌放在我应该放在的地方它也不起作用吗？

感谢您的宝贵时间。

【问题讨论】：

标签： javascript php laravel dropzone.js

【解决方案1】：

只需在表单中放置隐藏字段，例如

<input type="hidden" name="_token" value="{{csrf_token()}}">

您可以通过使用像 as 之类的 ajax 调用传递令牌的值来实现不同的方式

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

【讨论】：

在我的问题底部，您可以看到，在我生成的表单中，有
但我在您的表单中找不到它，您需要手动将其放置在您的 form 标记中
我已经更新了我的答案，您可以删除第一个并可以使用第二种方式
创建类似config.js 的内容并在您的dropzone.js 之前调用它
在 dropzone.js 之前调用的 config.js 文件中添加了您的最后一次更新，但仍然无法正常工作。我的请求标头中甚至还有 X-CSRF-Token:P189MMHAU1YPDoqozMEaQKCdqFhzP3bHOlmVKygV

【解决方案2】：

而不是创建有点脏的新元素。您可以将其包含在您手动初始化的 dropzone 中。

var myDropzone = new Dropzone("#hello", { 
            url: $('#hello').attr('action'),
            headers: {
               'x-csrf-token': document.querySelectorAll('meta[name=csrf-token]')[0].getAttributeNode('content').value,
            }
          });

更详细的 laravel dropzone 集成可以参考这篇教程Integrating Dropzone.js in Laravel 5 applications

【讨论】：