在Laravel 5.3上使用javascript x-editable进行TokenMismatchException

Before marking it as duplicated, i tried the other solutions found on the web, including SO, and none of them solved my issue.

I'm using x-editable plugin to store a new record using a store route.

When the form is submitted, i get a 500 with TokenMismatchException error.

I know about setting the csrf token thing, but i tried it in several ways, and nothing is working.

That's my javascript code:

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

The 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>

The Route

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

I already tried all possible combinations of the following:

$.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);
        }
    });
});

note

$('meta[name="csrf-token"]').attr('content') and window.Laravel.csrfToken are the same

See request screenshot

update

I found out that placing Route::resource('ricettanota', 'RicettaNotaController'); into the api routes file(api.php) causes the issue, while placing the routes into the web routes file (web.php) and using the code above works.

Why using the API i get token mismatch, is still a mystery.

try this in your ajaxSetup

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

this is use code

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

}});

this Follow link

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

Not sure if this is what you are looking for, but maybe you should not struggling in sending custom header with x-editable plugin, but sending custom parameters.

The following code works for me.

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

Set csrf in your a-tag or somewhere else you like.

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

Hope this helps.