I have to complete the real-time table using ajax but I am sticking with an error which is CSRF token mismatch error

Question

I am A PHP developer and currently moving towards Laravel framework as per my task I have to complete the real-time table using ajax but I am sticking with an error which is CSRF token mismatch error please help me to resolve the error I am posting shortcode only

ajax

$(document).ready(function(){
            $('.toggle-class').change(function() {

                var status = $(this).prop('checked') === true;
                var id = $(this).data('id');
                var csrf=$('meta[name="csrf-token"]').attr('content');



                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: '/package/status',
                    data: {'status': status, 'id': id, 'XSRF-TOKEN': csrf},
                    success: function(data){
                        console.log('success '+data);
                    }
                });

            })
        })

Route Path

Route::post('package/status', [App\Http\Controllers\PackageController::class,'status']);

Controller code

 public function status(Request $request){


        $Package = package::find($request->id);

        $Package->status = $request->status;

        $Package->save();

        return response()->json(['success'=>'Status change successfully.']);
    }

I don't know why it is showing me CSRF token mismatch when headers contain tokens once solved I can have some real-time action.

CSRF token is generally passed as `_TOKEN` in Laravel. Does this work: `data: {'status': status, 'id': id, '_TOKEN': csrf}`? — Tim Lewis, Mar 31 '21 at 17:33
Does this answer your question? [Ajax LARAVEL 419 POST error](https://stackoverflow.com/questions/46472812/ajax-laravel-419-post-error) — miken32, Mar 31 '21 at 17:54
He already have csrf token in the ajax setup, He needs to add csrf meta tag inside the head of the master/parent layout. @miken32 — Farhan Ibn Wahid, Mar 31 '21 at 20:01

score 1 · Accepted Answer · answered Apr 01 '21 at 16:49

1

Try this:

 data: {'status': status, 'id': id, '_token': '{{csrf_token()}}'},

answered Apr 01 '21 at 16:49

Mohammed_40

432
2
9

score 0 · Answer 2 · answered Mar 31 '21 at 19:54

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

Add this meta tag in the header of your master layout for csrf token which will be matched with the csrf token of your ajax call and thus it will solve your problem hopefully. Let me know if it works.

score 0 · Answer 3 · answered Apr 01 '21 at 16:24

$.ajax({
    type: "POST",
    dataType: "json",
    url: '/package/status',
    data: {'status': status, 'id': id, '_token': '{{ csrf_token() }}'},
    success: function(data){
    console.log('success '+data);
    }
});

Change XSRF-TOKEN to _token And change data like this {{ csrf_token() }}

score 0 · Answer 4 · answered Apr 02 '21 at 01:36

Just use _token for the csrf variable

        $(document).ready(function(){
            $('.toggle-class').change(function() {

                var status = $(this).prop('checked') === true;
                var id = $(this).data('id');
                var csrf=$('meta[name="csrf-token"]').attr('content');



                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: '/package/status',
                    data: {'status': status, 'id': id, '_token': csrf},
                    success: function(data){
                        console.log('success '+data);
                    }
                });

            })
        })

I have to complete the real-time table using ajax but I am sticking with an error which is CSRF token mismatch error

4 Answers4