Laravel token missmatch exception - php

Question

I am trying to upload image by ajax. I am using Croppic Master but when I upload the image, it gives me token miss match exception. How to pass token in the below code?
<div class="col-lg-4 ">
<div id="cropContaineroutput">
</div>
<input type="text" id="cropOutput" style="width:100%; padding:5px 4%; margin:20px auto; display:block; border: 1px solid #CCC;" />
JS
var croppicContaineroutputOptions = {
uploadUrl: '<?php echo url()?>/users/cover',
cropUrl: 'img_crop_to_file.php',
outputUrlId: 'cropOutput',
modal: false,
loaderHtml: '<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
onBeforeImgUpload: function () {
console.log('onBeforeImgUpload')
},
onAfterImgUpload: function () {
console.log('onAfterImgUpload')
},
onImgDrag: function () {
console.log('onImgDrag')
},
onImgZoom: function () {
console.log('onImgZoom')
},
onBeforeImgCrop: function () {
console.log('onBeforeImgCrop')
},
onAfterImgCrop: function () {
console.log('onAfterImgCrop')
},
onReset: function () {
console.log('onReset')
},
onError: function (errormessage) {
console.log('onError:' + errormessage)
}
}
var cropContaineroutput = new Croppic('cropContaineroutput', croppicContaineroutputOptions);

Answer 1

I had the same problem with ajax request and the trick bellow solved the problem.
Add the token in your template:
<meta name="csrf-token" content="{{ csrf_token() }}">
Then in your javascript:
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});

Answer 2

Another way to include the token into your AJAX calls:
/** inside your blade **
<script>
var token = '{{csrf_token()}}'
$.ajax('url/to/api', {
....
data: {
....
'_token' : token
}
}
</script>
Essentially, as long as your request has the CSRF token within a field called _tokenit should work.