如何通过此文件上传传递 csrf 令牌答案

【问题标题】：How do i pass csrf token with this file upload如何通过此文件上传传递 csrf 令牌
【发布时间】：2017-03-20 08:08:00
【问题描述】：

我有这个 html：

<input id="input-id" type="file" accept=".mp3, .mp4" name="file" class="form-control"><br>
<input type="hidden" id="getfilename" name="uploadedfile" value="">

还有这个jquery插件上传文件：

$("#input-id").fileinput({
        maxFileSize: 264000,
        uploadUrl: "{{url('/rate/uploadfile')}}", 
        uploadAsync: true,
        allowedFileExtensions: ['mp3', 'mp4', 'mpeg', 'flv'],
        maxFileCount: 1,
        showUpload: true,
        dropZoneEnabled: false
});

以及web中间件组下的路由：

Route::post('rate/uploadfile', 'RateController@uploadfile');

每当我尝试上传文件时，都会遇到熟悉的错误：

VerifyCsrfToken.php 中的TokenMismatchException

【问题讨论】：

您是否记得将令牌 {{ csrf_token() }} 添加到视图中的表单中？
@JeffPuckettII 是的。但我正在尝试在提交表单之前使用此插件上传文件。

标签： php jquery laravel jquery-plugins laravel-5.3

【解决方案1】：

首先在您的表单上添加此代码 <input type="hidden" id="csrf_token" name="_token" value="{{ csrf_token() }}"> 这会使用 laravel 的 csrf_token() 函数在您的表单上添加一个 csrf 令牌字段。然后在你的脚本上添加这个

    $("#input-id").fileinput({
            maxFileSize: 264000,
            uploadUrl: "{{url('/rate/uploadfile')}}", 
            uploadAsync: true,
            uploadExtraData:{'_token':$('#csrf_token').val()
            allowedFileExtensions: ['mp3', 'mp4', 'mpeg', 'flv'],
            maxFileCount: 1,
            showUpload: true,
            dropZoneEnabled: false
    });

如果你使用http://plugins.krajee.com/file-input这个插件来上传文件，那么uploadExtraData:{'_token':$("#csrf_token").val()},这一行应该添加csrf令牌作为ajax请求的额外post参数。希望这会有所帮助。

【讨论】：

【解决方案2】：

此关注 link

第一步添加元

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

第二步

$("#input-id").fileinput({
    maxFileSize: 264000,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    uploadUrl: "{{url('/rate/uploadfile')}}", 
    uploadAsync: true,
    allowedFileExtensions: ['mp3', 'mp4', 'mpeg', 'flv'],
    maxFileCount: 1,
    showUpload: true,
    dropZoneEnabled: false});

【讨论】：

【解决方案3】：

您还可以将 csrf_token 添加到每个视图中，并使用表单中的隐藏输入字段进行保存。为此，请使用元标记将其放置在标题中。

<meta name="_token" content="{{ csrf_token() }}"/>

然后，您可以在使用任何脚本函数或任何 ajax 调用时轻松访问该值：

var meta_token = $("meta[name=_token]");

然后就像 muttalebm 说的，使用 uploadExtraData 你可以做到以下几点：

uploadExtraData: meta_token.attr("content")

为了测试开发，您还可以将 url 作为例外添加到 VerifyCsrfToken 中间件类中，不建议在生产模式下这样做，因为这会给您带来不必要的安全风险。但是，如果您是在本地测试而不是在生产模式下，您可以简单地执行以下操作：

protected $except = ['/rate/uploadfile']; 在您的 VerifyCsrfToken 类中。

【讨论】：

【解决方案4】：

我尝试了这篇文章中的所有示例，但没有得到很好的结果，适合我的配置是

$("#input-id").fileinput({
            uploadUrl: "http://127.0.0.1:8000/api/processfile",
            enableResumableUpload: true,
            allowedFileExtensions : ['json'],
            ajaxSettings : {
                'headers': {"X-CSRFToken": crf_token},
            },
            maxFileCount: 10,
            showCancel: true,

阅读文档标题的正确位置是 ajaxSettings:https://plugins.krajee.com/file-input/plugin-options#ajaxSettings

此代码适用于 python Django 或烧瓶，我不知道为什么 PHP 有效

ajaxSettings : {
                'headers': {"X-CSRF-TOKEN": crf_token},
            },

为了避免我目前使用的问题

ajaxSettings : {
                'headers': {'X-CSRF-TOKEN': crf_token , "X-CSRFToken": crf_token},
            },

【讨论】：