jQuery add CSRF token to all $.post() requests' data

Question

I am working on a Laravel 5 app that has CSRF protection enabled by default for all POST requests. I like this added security so I am trying to work with it.

While making a simple $.post() request I received a 'Illuminate\Session\TokenMismatchException' error because the required form input _token was missing from the POST data. Here is an example of a $.post request in question:

var userID = $("#userID").val(); $.post('/admin/users/delete-user', {id:userID}, function() { // User deleted }); 

I have my CSRF token stored as a meta field in my header and can easily access it using:

var csrf_token = $('meta[name="csrf-token"]').attr('content'); 

Is it possible to append this to the json data on all outgoing $.post() requests? I tried using headers but Laravel did not seem to recognize them -

var csrf_token = $('meta[name="csrf-token"]').attr('content'); alert(csrf_token); $.ajaxPrefilter(function(options, originalOptions, jqXHR){     if (options['type'].toLowerCase() === "post") {         jqXHR.setRequestHeader('X-CSRFToken', csrf_token);     } }); 

Answer 1

From Laravel documentation:

You could, for example, store the token in a "meta" tag:

Once you have created the meta tag, you can instruct a library like jQuery to add the token to all request headers. This provides simple, convenient CSRF protection for your AJAX based applications:

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

So for example you can do request like below.

Add this meta tag to your view:

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

And this is an example script which you can communicate with Laravel (sends request when you click an element with id="some-id" and you can see the response in an element with id="result"):

<script type="text/javascript">     $(document).ready(function(){          $.ajaxSetup({             headers:             { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }         });          $("#some-id").on("click", function () {             var request;               request = $.ajax({                 url: "/your/url",                 method: "POST",                 data:                 {                     a: 'something',                     b: 'something else',                 },                 datatype: "json"             });              request.done(function(msg) {                 $("#result").html(msg);             });              request.fail(function(jqXHR, textStatus) {                 $("#result").html("Request failed: " + textStatus);             });         });      }); </script>