Utilizando ajax con laravel

En este artículo veremos como hacer una petición ajax en Laravel de varias maneras, pero antes de eso tendremos una pequeña introducción de como usa las librerías y frameworks de JavaScript en Laravel.

Contenido del articulo:

Introduccion
CSRF
Diferentes maneras de utlizar ajax con laravel

Introducción

Por defecto, Laravel ya viene con varias librerías javascript pre-instaladas, el que sean o no utilizadas es opcional. Estas librerías son jQuery, axios, Bootstrap y Vue.js.

Puede verlas como son incluidas en resources/js/app.js en Laravel 5.8 y en otras versiones resources/assets/js/app.js

En caso de no querer usar las librerías, puede no usar este archivo en su aplicación o modificarlo a su gusto.

CSRF

Teniendo en cuenta la Protección CSRF.

Para utilizar ajax con Laravel lo primero que tenemos que tener en cuenta es que laravel usa CSRF Protection, en este post mostraré como hacerlo utilizando ajax a través de la librería jquery.

En caso de haber intentado usar ajax sin tener en cuenta la protección CSRF probablemente haya recibido un error de token.

¿Que es la Protección CSRF?

El Cross-site request forger es un tipo de ataque que el cual usa un fragmento de código, o también puede ser un fragmento de datos u otros tipos de acciones con el objetivo de aprovechar la vulnerabilidad de seguridad de un sistema informático para conseguir un comportamiento no deseado del mismo estas acciones son realizadas por un usuario que el sitio web confía.

Utilizando el token

Tenga en cuenta poner la siguiente linea en la plantilla que contenga las etiquetas <head></head>.

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

¿Por qué debo agregar esta línea?

La explicación es simple, usaremos este meta para almacenar el token.

¿Y que es el token?

Como una explicación simple digamos que es como una llave, si la tienes pasas no la tienes no pasas.

Como chequea el token laravel

Para pasar el token por javascrpt primero debemos saber como laravel chequea este. La siguiente imagen muestra la función que se encarga de ello.

Como podemos ver el token lo podemos pasar tanto por el header o como un input siendo primero chequeado si el input con el nombre ‘_token’ existe o si el header ‘X-CSRF-TOKEN’ existe.

El token lo debemos usar cuando usemos como metodo post. Ahora bien como obtengo el token a pasarlo por javascript?

Pues podemos obtenerlo del meta, con javascript:

Recomiendo agregar esta línea globalmente en caso de no utlizar jquery o axios

var laravelToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

Diferentes Maneras de utilizar AJAX con Laravel

Debido a que este tema se está extendiendo demasiado y se me hace dificil corregir errores al ser una entrada tan larga he decidido segmentarlo el tema en varias entradas.

De mi parte le recomiendo utilizar Axios aunque cualquiera de las 3 últimas funciona bastante bien, las 2 últimas en la lista utilizan promesas. En caso de que encuentre un error puede comunicármelo en twitter @luisg2249_luis.

Category: laravel

Something wrong? If you found an error or mistake in the content you can contact me on Twitter | @luisg2249_luis.