laravel

Agregar token CSRF de Laravel a fetch de JavaScript

En este post te mostraré cómo agregar el token CSRF de Laravel a las llamadas AJAX con fetch, incluyendo el token en el encabezado.

Como bien sabes, el token CSRF de Laravel previene ataques CSRF y es necesario al hacer peticiones HTTP que no son GET.

Incluyendo token en window

En mi caso, como estoy importando mi script desde otro lugar, he colocado el token de manera global en window dentro de una plantilla de blade, así:

<script type="text/javascript">
    window.CSRF_TOKEN = '{{ csrf_token() }}';
</script>

Por favor observa que estoy invocando a la función csrf_token de Laravel, pero para que esto funcione se necesita hacerlo en una plantilla de blade o similar.

De este modo, cuando se refresque la página web, el token será refrescado.

Incluir encabezado con fetch

Ahora cada que hagamos una petición con fetch debemos incluir el encabezado con el token.

El encabezado en cuestión es X-CSRF-TOKEN y, por ejemplo, para hacer una petición post, se hace lo siguiente:

fetch("/ruta", {
    headers: {
        'X-CSRF-TOKEN': window.CSRF_TOKEN// <--- aquí el token
    },
    method: "POST",
    body: JSON.stringify({
      "nombre": "Luis",
      "web": "parzibyte.me"
    })
})
.then(r => r.json())
.then(respuesta => {
  console.log(respuesta);
});

Resumidamente hay que incluir en headers el encabezado. Y eso es todo, ahora ya se pueden hacer peticiones AJAX desde fetch a Laravel.

Si no incluyes el token, recibirás una respuesta 419.

Más cosas que hacer con fetch

Te invito a ver mi post sobre una envoltura sobre fetch.

Conclusión

De este modo no necesitas axios u otras librerías, todo se hace con la función nativa fetch.

No digo que las librerías sean malas, digo que tal vez no las necesitas.

Aquí dejo más sobre Laravel y más sobre JavaScript. De igual forma, como siempre, la documentación oficial.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Imprimir ñ en impresora térmica

En este post te enseñaré a imprimir la letra ñ en una impresora térmica. Voy…

2 días hace

Tramitar acta de nacimiento en línea de manera instantánea

En este post te quiero compartir mi experiencia tramitando un acta de nacimiento de México…

3 días hace

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

2 semanas hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

3 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

3 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

3 semanas hace

Esta web usa cookies.