2015-09-23 10 views
32

Ich versuche, Daten aus der Datenbank über Ajax zu löschen.Laravel csrf Token Mismatch für AJAX POST Anfrage

HTML:

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

Meine Ajax-Code:

$('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; 
} 
}); 

Das ist meine Abfrage Daten aus der Datenbank zu holen ...

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

Aber wenn ich Klicken Sie auf Delete link data not deleted und zeigen csrf_token Mismatch ...

Antwort

64

Sie müssen Daten in Ihrer Ajax Anfrage hinzufügen. Ich hoffe es wird Arbeit sein.

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

Was ist, wenn die Ajax-Funktion in '.js' Datei befindet? – raBne

13

Ich denke, ist besser, das Token in Form gebracht und bekommen dieses Token von id

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

Und die JQuery:

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

diese Weise Ihre JS nicht müssen in Ihren Blade-Dateien enthalten sein.

7

Habe ich nur noch headers: in Ajax-Aufruf:

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

im Blick:

<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 Funktion:

<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> 

in Controller:

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

in routes.php

Route::post('ajax', '[email protected]'); 
+0

Header zu Ajax Anruf hinzufügen half mir. –

+0

Dies ist die beste Antwort, da JavaScript in einer Blade-Datei nicht benötigt wird (es sei denn, Sie möchten es in einer Blade-Datei, aber es wird jedes Mal gerendert, wenn jemand auf diese Seite kommt) –

0

Ich hatte tatsächlich diesen Fehler und keine Lösung finden konnte. Ich habe eigentlich keine Ajax-Anfrage gestellt. Ich weiß nicht, ob dieses Problem darauf zurückzuführen ist, dass es sich um eine Subdomain auf meinem Server oder um eine solche handelt. Hier ist meine Frage.

  $('#deleteMeal').click(function(event) { 
       var theId = $(event.currentTarget).attr("data-mealId"); 
        $(function() { 
        $("#filler").dialog({ 
         resizable: false, 
         height:140, 
         modal: true, 
         buttons: { 
         "Are you sure you want to delete this Meal? Doing so will also delete this meal from other users Saved Meals.": function() { 
          $('#deleteMealLink').click(); 
//       jQuery.ajax({ 
//        url : 'http://www.mealog.com/mealtrist/meals/delete/' + theId, 
//        type : 'POST', 
//        success : function(response) { 
//         $("#container").replaceWith("<h1 style='color:red'>Your Meal Has Been Deleted</h1>"); 
//        } 
//       }); 
         // similar behavior as clicking on a link 
          window.location.href = 'http://www.mealog.com/mealtrist/meals/delete/' + theId; 
          $(this).dialog("close"); 
         }, 
         Cancel: function() { 
          $(this).dialog("close"); 
         } 
         } 
        }); 
        }); 
       }); 

So gründen ich eigentlich einen Anker eher auf meine API zu gehen, als eine Post-Anforderung zu tun, was ist, was ich die meisten Anwendungen tun Figur.

<p><a href="http://<?php echo $domain; ?>/mealtrist/meals/delete/{{ $meal->id }}" id="deleteMealLink" data-mealId="{{$meal->id}}" ></a></p> 
42

Der beste Weg, dieses Problem zu "X-CSRF-token" zu lösen ist, den folgenden Code zu Ihrem Haupt-Layout hinzuzufügen, und weiterhin macht Ihre Ajax-Aufrufe normalerweise:

In Header

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

In Skript

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

Vielen Dank. Dies ist eine abgerundete Lösung! Auf diese Weise stellen Sie es einfach einmal auf und danach schreiben Sie einfach Ihren normalen $ .ajax Code. – pkid169

+1

Dies ist die bessere Lösung, weil Sie es in '.js' Dateien verwenden können – Adam

5

Wenn Sie Vorlagendateien verwenden, können Sie Ihr meta-Tag in den Kopf section (oder wie auch immer Sie es nennen) setzen, die Ihre meta Tags enthalten.

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

Der nächste, was, müssen Sie Ihren ajax (in meinem Beispiel das headers Attribut setzen, ich bin mit datatable mit serverseitige Verarbeitung:

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

Hier ist das vollständige datatable Ajax-Beispiel:

$('#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); 
      } 
     } 
    }); 

Danach tun, sollten Sie 200 status für Ihre ajax Anfrage erhalten.

1

wenn Sie jQuery verwenden AJAX Beiträge zu senden, fügen Sie diesen Code auf alle Ansichten:

$(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 fügt alle Anfragen ein XSRF Cookie, und wir es automatisch kurz vor einreichen alle AJAX-Anforderungen anhängen.

Sie können die getCookie-Funktion ersetzen, wenn es eine andere Funktion oder ein jQuery-Plugin gibt, die dasselbe tun.

0

Sie sollten ein verstecktes CSRF (Cross Site Request Forgery) -Tokenfeld in das Formular einfügen, damit die Middleware die Anfrage validieren kann.

Laravel generiert automatisch ein CSRF- "Token" für jede aktive Benutzersitzung, die von der Anwendung verwaltet wird. Dieses Token wird verwendet, um zu verifizieren, dass der authentifizierte Benutzer derjenige ist, der die Anfragen tatsächlich an die Anwendung richtet.

Also, wenn Sie Ajax-Anfragen tun, müssen Sie die csrf Token über Datenparameter übergeben. Hier ist der Beispielcode.

var request = $.ajax({ 
    url : "http://localhost/some/action", 
    method:"post", 
    data : {"_token":"{{ csrf_token() }}"} //pass the CSRF_TOKEN() 
    }); 
Verwandte Themen