Laravel csrf令牌与ajax POST请求不匹配

Question

我试图通过ajax从数据库中删除数据.

HTML:

@foreach($a as $lis)
  //some code
  <a href="#" class="delteadd" id="{{$lis['id']}}">Delete</a>
  //click action perform on this link                  
@endforeach

我的ajax代码:

$('body').on('click', '.delteadd', function (e) {
e.preventDefault();
//alert('am i here');
if (confirm('Are you sure you want to Delete Ad ?')) {
    var id = $(this).attr('id');
    $.ajax({
        method: "POST",
        url: "{{url()}}/delteadd",
        }).done(function( msg ) {
        if(msg.error == 0){
            //$('.sucess-status-update').html(msg.message);
            alert(msg.message);
        }else{
            alert(msg.message);
            //$('.error-favourite-message').html(msg.message);
        }
    });
} else {
    return false;
}
});

这是我从数据库中获取数据的查询...

$a = Test::with('hitsCount')->where('userid', $id)->get()->toArray();

但当我点击删除链接数据未删除并显示csrf_token不匹配...

Answer 1

解决此问题的最佳方法"X-CSRF-TOKEN"是将以下代码添加到主布局中,并继续正常进行ajax调用:

在标题中

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

在脚本中

<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
</script>

Answer 2

您必须在ajax请求中添加数据.我希望它能起作用.

data: {
        "_token": "{{ csrf_token() }}",
        "id": id
        }

Answer 3

我认为最好将令牌放在表单中,并通过id获取此令牌

<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

和JQUery:

var data = {
        "_token": $('#token').val()
    };

这样,您的JS不需要在您的刀片文件中.

Answer 4

我刚刚headers:在ajax调用中添加:

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

在视图中:

<div id = 'msg'>
     This message will be replaced using Ajax. Click the button to replace the message.
</div>

{{ Form::submit('Change', array('id' => 'ajax')) }}

ajax功能:

<script>
 $(document).ready(function() {
    $(document).on('click', '#ajax', function () {
      $.ajax({
         type:'POST',
         url:'/ajax',
         headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
         success:function(data){
            $("#msg").html(data.msg);
         }
      });
    });
});
</script>

在控制器中:

public function call(){
    $msg = "This is a simple message.";
    return response()->json(array('msg'=> $msg), 200);
}

在routes.php中

Route::post('ajax', 'AjaxController@call');

Answer 5

如果您使用的是模板文件,那么您可以将meta标记放在包含标记的头部section(或任何您的名称)中meta.

@section('head')
<meta name="csrf_token" content="{{ csrf_token() }}" />
@endsection

接下来,你需要把headers属性放到你的ajax(在我的例子中,我使用datatable服务器端处理:

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

这是完整的datatableajax示例:

$('#datatable_users').DataTable({
        "responsive": true,
        "serverSide": true,
        "processing": true,
        "paging": true,
        "searching": { "regex": true },
        "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
        "pageLength": 10,
        "ajax": {
            "type": "POST",
            "headers": {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
            "url": "/getUsers",
            "dataType": "json",
            "contentType": 'application/json; charset=utf-8',
            "data": function (data) {
                console.log(data);
            },
            "complete": function(response) {
                console.log(response);
           }
        }
    });

这样做之后,你应该得到200 status你的ajax要求.

Answer 6

知道有一个 X-XSRF-TOKEN cookie 是为了方便而设置的。Angular 等框架默认设置它。在文档https://laravel.com/docs/5.7/csrf#csrf-x-xsrf-token 中检查 您可能喜欢使用它。

最好的方法是使用元，以防 cookie 被停用。

    var xsrfToken = decodeURIComponent(readCookie('XSRF-TOKEN'));
    if (xsrfToken) {
        $.ajaxSetup({
            headers: {
                'X-XSRF-TOKEN': xsrfToken
            }
        });
    } else console.error('....');

这里推荐的元方式（你可以以任何方式放置该字段，但元很安静）：

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

注意 的使用decodeURIComponent()，它是从用于存储 cookie 的 uri 格式解码的。[否则你会在 laravel 中得到一个无效的负载异常]。

这里有关文档中的 csrf cookie 的部分要检查：https ://laravel.com/docs/5.7/csrf#csrf-x-csrf-token

同样在这里，laravel (bootstrap.js) 默认情况下如何为 axios 设置它：

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
} 

你可以去检查resources/js/bootstrap.js。

在这里读取 cookie 功能：

   function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
       }
        return null;
    }

Answer 7

你必须在主文件中包含这一行

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

在调用 ajax 时，您必须实现 csrf token ，

$.ajax({
url:url,
data:{
 _token:"{{ csrf_token() }}"
},
success:function(result){
 //success message after the controller is done..
}
})

Answer 8

id向meta包含令牌的元素添加一个

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

然后你可以在你的 Javascript 中得到它

$.ajax({
  url : "your_url",
  method:"post",
  data : {
    "_token": $('#csrf-token')[0].content  //pass the CSRF_TOKEN()
  },  
  ...
});

编辑：更简单的方法而不改变meta线路。

data : { 
    _token: "{{ csrf_token() }}" 
}

或者

data : { 
    _token: @json(csrf_token()), 
}

感谢@martin-hartmann

Answer 9

如果您使用 jQuery 发送 AJAX 帖子，请将此代码添加到所有视图：

$( document ).on( 'ajaxSend', addLaravelCSRF );

function addLaravelCSRF( event, jqxhr, settings ) {
    jqxhr.setRequestHeader( 'X-XSRF-TOKEN', getCookie( 'XSRF-TOKEN' ) );
}

function getCookie(name) {
    function escape(s) { return s.replace(/([.*+?\^${}()|\[\]\/\\])/g, '\\$1'); };
    var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
    return match ? match[1] : null;
}

Laravel 向所有请求添加 XSRF cookie，并且我们会在提交之前自动将其附加到所有 AJAX 请求。

如果有其他函数或 jQuery 插件可以执行相同的操作，您可以替换 getCookie 函数。