Question

我正在尝试通过ajax上传图片。我正在使用Croppic Master但是当我上传图片时，它会给我令牌未命中匹配例外。如何在下面的代码中传递令牌？

<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

我遇到了与ajax请求相同的问题，并且下面的技巧解决了这个问题。

在模板中添加令牌：

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

然后在你的javascript中：

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

Answer 2

将令牌包含在AJAX调用中的另一种方法：

/** inside your blade **
<script> 
var token = '{{csrf_token()}}'
$.ajax('url/to/api', { 
     ....
     data: { 
           ....
           '_token' : token
        } 
 }
</script>

基本上，只要您的请求在名为_token的字段中具有CSRF令牌，它就应该有效。

Laravel令牌失配异常

2 个答案: