Laravel 5.3 上带有 javascript x-editable 的 TokenMismatchException答案

【问题标题】：TokenMismatchException with javascript x-editable on Laravel 5.3Laravel 5.3 上带有 javascript x-editable 的 TokenMismatchException
【发布时间】：2016-11-15 10:59:53
【问题描述】：

在将其标记为重复之前，我尝试了在网上找到的其他解决方案，包括 SO，但都没有解决我的问题。

我正在使用x-editable 插件使用存储路径存储新记录。

提交表单后，我收到一个 500 并带有 TokenMismatchException 错误。

我知道设置 csrf 令牌 的事情，但我尝试了多种方式，但没有任何效果。

这是我的 javascript 代码：

$.fn.editable.defaults.params = function (params) {
    params._token = window.Laravel.csrfToken;
    return params;
};
$('.editable').each(function () {
    $(this).editable();
});

html

<head>
    [...]
    <meta name="csrf-token" content="{{ csrf_token() }}">
    [...]
    <script>
        window.Laravel = <?php
        echo json_encode([
            'csrfToken' => csrf_token(),
        ]);
        ?>
    </script>
    [...]
</head>

<button id="note-asl-text"
    data-type="textarea"
    data-placeholder="Aggiungi Nota"
    data-url="{{route('ricettanota.store')}}"
    data-title="Inserisci una nuova nota"
    data-highlight="false"
    data-mode="inline"
    data-send="always"
    data-showbuttons="bottom"
    class="editable"
    >Aggiungi nota</button>

路线

Route::resource('ricettanota', 'RicettaNotaController');

我已经尝试了以下所有可能的组合：

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': window.Laravel.csrfToken
    }
});

$('.editable').each(function () {
    $(this).editable({
        ajaxOptions: {contentType: 'application/json', dataType: 'json'},
        params: function (params) {
            params._token = window.Laravel.csrfToken;
            return JSON.stringify(params);
        }
    });
});

注意

$('meta[name="csrf-token"]').attr('content') 和 window.Laravel.csrfToken 是一样的

更新

我发现将Route::resource('ricettanota', 'RicettaNotaController'); 放入 api 路由文件 (api.php) 会导致问题，同时将路由放入 web 路由文件 (web.php em>) 并使用上面的代码。

为什么使用 API 会导致令牌不匹配，仍然是个谜。

【问题讨论】：

标头中是否包含令牌
@MohamedAthif 是的，我在问题中写了。
我的意思也是在 html 的头部。不仅仅是Javascript
是的，我刚刚更新了添加html头部的问题

标签： javascript php jquery html laravel

【解决方案1】：

不确定这是否是您要查找的内容，但也许您不应该在使用 x-editable 插件发送自定义标头时苦苦挣扎，而是发送自定义参数。

以下代码适用于我。

$(document).ready(function() {
    $.fn.editable.defaults.mode = 'popup';     
    $('.node').editable(
        {
            params: function(params) {
                var data = {};
                data['_csrf_token'] = $(this).data("csrf");
                return data;
            },
        }
    );
});

在您的 a-tag 或您喜欢的其他地方设置 csrf。

<a href="#" ... data-csrf="xxxxxxx" /a>

希望这会有所帮助。

【讨论】：

【解决方案2】：

在你的 ajaxSetup 中试试这个

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

【讨论】：

已经试过了，$('meta[name="csrf-token"]').attr('content')和window.Laravel.csrfToken是一样的
如果它被javascript调用，你为什么不试试console.log令牌？
我不明白你的意思，但是令牌的 console.log 有效。我确实在请求中有令牌，但无论如何我得到令牌不匹配

【解决方案3】：

我在 Laravel 5.8 中也遇到了同样的问题。以下代码对我有用。

$.fn.editable.defaults.ajaxOptions = {
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
};

【讨论】：

【解决方案4】：

这是使用代码

$.ajax({
type: 'POST',
url: url,
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
dataType:'html',
data:data,
success:function(data){

}});

此关注链接

https://laravel.com/docs/5.3/csrf#csrf-x-csrf-token

【讨论】：

我知道，但我不能调用自定义$.ajax