Using AJAX with Laravel

On this article we will aboard how we can use AJAX on Laravel, but before lets take a little intro.

Content:

Introduction
CSRF
Different way of use ajax and laravel

Introduction

By default, Laravel comes with JavaScript libraries preinstalled, being used or not is optional. You can erase these libraries and use other Laravel use Lodash yo can see on resources/js/bootstrap.js this is not the bootstrap plugin that you use on layout, this is a different file, don’t confuse with it.

Since version 6.x you can install bootstrap(layout) with:

composer require laravel/ui:^2.4

In previous version comes preinstalled. And if you wish no bootstrap, you can remove preset with:

project/

php artisan preset none

CSRF

The CSRF protection.

The first thing we have to take in consideration to use ajax in Laravel its the csrf protection. Probably you tried to use ajax, making a post from a form, and you got an error 405,406 or 419 Page Expired if you are using fetch.

¿What is the CSRF protection?

The Cross-site request forger it’s an attack that use a code fragment or data fragment or other type of actions to exploit a security vulnerability. In this case it’s a user that the site trust. (could it be a logged user).

? Well, how Laravel protects us against this attack?

Laravel uses the token method, so Laravel verify if you really are who you say that you are.

form token >———————————>page expected token = form token?

With this protection other page can’t do a CSRF attack, because it must know the token and the token it’s not the same every session you started, and every user have a different token.

It’s like saying this request come from my site, it’s the user that must be?

Using the token

To use the token we must add the following meta between <head></head> tags in our HTML. Be sure that the token it in all your pages making a master layout

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

¿what is this line?

This meta will store the token in my page, all users will have different tokens.

You can see the token as a magnetic key, you have access you request is processed.

How is checked the token?

Before pass our token with JavaScript, we need to know how Laravel check our token. Next image show the specific function that get the token from the request.

As you can see the token could be passed from header or by input with the name _token

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

You must pass the token via javascript when post method is used.

We can obtain our token from our meta

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

Different way of use ajax and laravel

Because this topic has been extended too much and become dificult correct mistakes and errors, it has been divided into several posts

Utilizando AJAX con XMLHttpRequest en Laravel[spanish][will not be translated]
Using JQuery AJAX in Laravel
Axios and Laravel
API Fetch en Laravel[spanish][not translated or done yet]

I could recommend you to use axios cause you have not to obtain the token, cause that come with laravel by default. So you can do post,get, patch or whatever you need to do without worry about the token.

Equals, you have to use the meta tag with the token.

I’m not a native English speaker and i not good writing it, so you can recommend changes on this post or other posts too.

Category: en-javascript

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