خطأ CSRF Token Mismatch عند استخدام Ajax في لارافيل

Amir Alsaeed · 18 مارس 2021

أحاول حذف بعض البيانات من القاعدة عن طريق استخدام Ajax:

@foreach($a as $lis)
  //some code
  <a href="#" class="delete" id="{{$lis['id']}}">Delete</a>
  //عند الضغط على هذا الزر ستجري عملية الحذف                 
@endforeach

والكود الخاص بالعملية:

$('body').on('click', '.delete', function (e) {
e.preventDefault();

if (confirm('Are you sure you want to Delete?')) {
    var id = $(this).attr('id');
    $.ajax({
        method: "POST",
        url: "{{url()}}/delete",
        }).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;
}
});

وضمن المتحكم الخاص بالعملية قمت بكتابة:

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

ولكن يظهر لدي الخطأ: Laravel csrf token mismatch، كيف يمكنني حل المشكلة؟

سامح أشرف · 18 مارس 2021

يجب أن يحتوي طلب ajax على header : X-CSRF-TOKEN ويمكنك عمل ذلك من خلال إضافة عنصر meta إلى الصفحة بالشكل التالي:

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

وتعديل التابع ajax بالشكل التالي:

$.ajax({
    method: "POST",
    url: "{{url()}}/delete",
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
}).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);
  };

لاحظ أنه تم إضافة السطر التالي:

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

هذا السطر سيقوم بجلب CSRF Token من عنصر Meta الذي قمنا بإضافته في الخطوة الأولى وسيقوم بإضافته مع طلب Ajax.

Sam Ahw · 18 مارس 2021

يمكنك إضافة CSRF ضمن الفورم نفسه، وبعدها الحصول على قيمته حسب ال id:

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

ثم في الجافاسكريبت:

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

وبذلك، لا داعي لأن يتواجد كود الجافاسكريبت ضمن ملف blade ويمكنك فصلهم.

وأيضاً في حال وجود عدة عمليات ajax في صفحات متفرقة من ملفات المشروع، يمكنك إضافة التالي في ترويسة الصفحة الرئيسية للمشروع:

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

ثم الكود التالي:

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

وبعدها يمكنك إجراء AJAX بشكل عادي في باقي المكونات والصفحات، فسيتم دوماً إضافة ال CSRF لجميع العمليات بدلاً من إعادة كتابتها في كل عملية.

خطأ CSRF Token Mismatch عند استخدام Ajax في لارافيل

السؤال

Amir Alsaeed

2 أجوبة على هذا السؤال

Recommended Posts

سامح أشرف

Sam Ahw

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية