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

Question

我有这个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');

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

TokenMismatchException in VerifyCsrfToken.php

Answer 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 参数.希望这有帮助。

Answer 2

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

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

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

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

然后就像 muttalebm 说的，使用 uploadExtraData 你可以做以下事情：

uploadExtraData: meta_token.attr("content")

为了测试开发，您还可以在 VerifyCsrfToken 中间件 class 中添加 url 作为例外，不建议在生产模式下打开您面临不必要的安全风险。但是，如果您是在本地测试而不是在生产模式下，您可以简单地执行以下操作：

protected $except = ['/rate/uploadfile']; 在您的 VerifyCsrfToken class.

Answer 3

这个关注 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});

Answer 4

我尝试了这个 post 中的所有示例，但没有一个好的结果，适合我的配置是

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

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

此代码适用于 python Django 或 flask，我不知道为什么适用于 PHP

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

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

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

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

How do i pass csrf token with this file upload

php

jquery

jquery-plugins

laravel

laravel-5.3