Search code examples
javascriptlaravelvue.jscsrf

Call post to vue with laravel error 419 csrf-token

I´m working in a project with Laravel and I implement Vue to make asynchronous task. My problem is that Laravel use in post methos csrf token protection and I don´t how to pass this token to the javascript call. How can I do it ?

<header id="heading" >
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <h1 class="text-center">Preparación de Pedidos</h1>
        @if( $mensaje != '' )
        <div class="alert alert-success">{{ $mensaje }}</div>
        @endif
</header>

<script type="text/javascript">
    const app = new Vue({
        el: '#vue', 
        data: {
            mensaje: '',
            pedidos: [],
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },
        created() {
            $.post('/prestashop/intranet2/almacen/get_tipos_pedidos_preparacion', {}).then(function(response) {
                this.tipos = response.body.tipos;
            }, function(response) {
                alert('error');
                console.log(response);
            });
            this.updateEstadisticas();
        },
    });
 </script>

In debug I can see the token

_token:"kUM5V4gwOweyE09jdoVP3lvta1DHyYpTlrGnSfx9"

enter image description here

Solution

  • It should be _token instead of csrf.

     data: {
            mensaje: '',
            pedidos: [],
             "_token": document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
        },

    Also instead of getting token from a query selector you can achive it like this too.

     data: {
     "_token":{{ csrf_token() }}
    },