CSRF Token Mismatch in Laravel 10 Jquery AJAX

P.S: I have seen the CSRF Token mismatch answers from many in Stackoverflow and I tried them all.
My problem didn’t solved with all the existing answers. So, I had to ask a new question again.

I am using Laravel 10 with PHP 8.x and jQuery AJAX.

in my app.blade.php, I added

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

in my resourcesjsbootstrap.js

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

in my blade

<script>
let data = { '_token': $('meta[name="csrf-token"]').attr('content') }
//Already tried '_token': "{{ csrf_token() }}"
$.ajax({
                    type: "POST",
                    url: url,
                    data: data,
                    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    contentType: "application/json",
                    dataType: "json",
                    success: function(text) {}
})
</script>

In my response,

enter image description here

Can someone help me out fixing this issue.