Laravel token missmatch exception

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);

try adding this in form <input type="hidden" name="_token" value="{{ csrf_token() }}"> or add this to your main layout <meta name="csrf-token" content="{{ csrf_token() }}" /> — Saani
– Saani, Commented Feb 4, 2016 at 12:26
check this: stackoverflow.com/questions/22877117/laravel-csrf-token — Saani
– Saani, Commented Feb 4, 2016 at 12:32

Panagiotis Koursaris · Accepted Answer · 2016-02-04 20:21:49Z

3

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')
  }
});

edited Feb 4, 2016 at 20:21

answered Feb 4, 2016 at 12:45

Panagiotis Koursaris

4,0534 gold badges29 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Extrakun · Accepted Answer · 2016-02-04 19:33:28Z

0

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.

answered Feb 4, 2016 at 19:33

Extrakun

19.3k23 gold badges85 silver badges138 bronze badges

Collectives™ on Stack Overflow

Laravel token missmatch exception

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related