laravel - error - cómo arreglar el token CSRF no encontrado en la consola

input token laravel

Question

Cómo reparar el token CSRF no encontrado en la versión 5.4, trato de aprender vue js en laravel pero tengo un error en mi consola "No se encontró el token CSRF", ayúdame a solucionar este error.

Answer 1

1) ¿De dónde viene este error?

Este error proviene de resources / js / bootstrap.js

2) ¿Por qué ocurrió este error?

vea el siguiente fragmento de código, es un intento de averiguar la metaetiqueta del nombre csrf-token, si se encuentra el token, a continuación, agregue como encabezados a axios http library.else mostrar error

let token = document.head.querySelector(''meta[name="csrf-token"]'');
if (token) {
    window.axios.defaults.headers.common[''X-CSRF-TOKEN''] = token.content;
} else {
    console.error(''CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'');
}

3) ¿Cuál es la solución?

El middleware VerifyCsrfToken verificará el encabezado de solicitud X-CSRF-TOKEN .

Podrías almacenar el token en una metaetiqueta HTML:

<meta name="csrf-token" content="{{ csrf_token() }}">

Generará el token como se muestra en la imagen:

Para solicitud de Ajax:

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

Para VueJS 2.0:

Vue.http.headers.common[''X-CSRF-TOKEN''] = document.head.querySelector(''meta[name="csrf-token"]'').content;

Lea más sobre el token CSRF: https://laravel.com/docs/5.8/csrf

Answer 2

Cuando use JavaScript en su archivo bootstrap.js encontrará estas líneas

let token = document.head.querySelector(''meta[name="csrf-token"]'');
if (token) {
    window.axios.defaults.headers.common[''X-CSRF-TOKEN''] = token.content;
} else {
    console.error(''CSRF token not found: https://laravel.com/docs/csrf#csrf-x- 
    csrf-token'');
}

Reemplace document.head.querySelector(''meta[name="csrf-token"]''); por $(''meta[name="csrf-token"]'').attr(''content'');

Podría ser

let token = $(''meta[name="csrf-token"]'').attr(''content'');
if (token) {
    window.axios.defaults.headers.common[''X-CSRF-TOKEN''] = token;
} else {
    console.error(''CSRF token not found: https://laravel.com/docs/csrf#csrf-x- 
    csrf-token'');
}

Esto también resuelve las solicitudes post-axios cuando tiene formularios en un componente vue.

Answer 3

Puedes agregar la siguiente etiqueta meta

<meta name="csrf-token" content="{{ csrf_token() }}">

Answer 4

Si está utilizando Vue, este es el camino a seguir:

Vue.http.interceptors.push(function (request, next) {
request.headers[''X-CSRF-TOKEN''] = Laravel.csrfToken;
next();
});

o

<script>
window.Laravel = <?php echo json_encode([
    ''csrfToken'' => csrf_token(),
]); ?>
</script>