从画布生成数据时出现 CSRF 令牌错误答案

【问题标题】：CSRF token error when generating data from canvas从画布生成数据时出现 CSRF 令牌错误
【发布时间】：2020-01-17 05:32:04
【问题描述】：

我正在使用一个名为 laravel-admin 的包。

我用流行的SignaturePad包创建了一个自定义签名字段，数据成功转换为图像。但是，当我尝试提交表单时，我收到一条错误消息，提示 CSRF 令牌未匹配。

这是我渲染SignaturePad类的代码：

public function render()
{
    $this->script = <<<EOT
    var canvas = document.getElementById('signature-pad');

    // Adjust canvas coordinate space taking into account pixel ratio,
    // to make it look crisp on mobile devices.
    // This also causes canvas to be cleared.
    function resizeCanvas() {
        // When zoomed out to less than 100%, for some very strange reason,
        // some browsers report devicePixelRatio as less than 1
        // and only part of the canvas is cleared then.
        var ratio = Math.max(window.devicePixelRatio || 1, 1);
        canvas.width = canvas.offsetWidth * ratio;
        canvas.height = canvas.offsetHeight * ratio;
        canvas.getContext("2d").scale(ratio, ratio);
    }

    window.onresize = resizeCanvas;
    resizeCanvas();

    var signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgb(255, 255, 255)' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
    });

    $('button[type="submit"]').click(function() {
        console.log(signaturePad.toDataURL());
        $('input[type=hidden]').val(signaturePad.toDataURL());
    });

    EOT;
    return parent::render();
}

如果我删除下面的行，我将不会得到它，但显然我的数据没有发送。它的工作方式是我转换图像的值并将其放入要发送的隐藏输入字段。有人可以帮忙吗？

$('button[type="submit"]').click(function() {
    console.log(signaturePad.toDataURL());
    $('input[type=hidden]').val(signaturePad.toDataURL());
});

【问题讨论】：

我可以看看你的表格吗？您是否包含“@csrf”？
可能是您无意中替换了多个隐藏的输入，其中一个用于 CSRF 验证。
是的，显然我也在更改 CSRF 验证的隐藏输入...@PtrTon

标签： laravel laravel-admin

【解决方案1】：

显然我忘记了 laravel 提供了包含 CSRF 令牌的隐藏输入，我正在与 jQuery 代码一起更改

$('button[type="submit"]').click(function() {
    console.log(signaturePad.toDataURL());
    $('input[type=hidden]').val(signaturePad.toDataURL());
});

谢谢大家

【讨论】：