Einfache Ajax-Suche mit Laravel Return Token Mismatch

Question

Ich bin nicht so viel vertraut mit Jquery/Ajax und wird einige Hilfe geschätzt. Ich versuche eine einfache Ajax-Suche zu machen, die eine Curl-Anfrage macht und das Ergebnis zurückgibt. Alles funktioniert gut, wenn ich keinen Ajax für die Suche verwende.

Dies ist mein Controller

function get_curl_content_tx($url) { 
    $curl = curl_init(); 
    curl_setopt($curl, CURLOPT_URL, $url); 
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); 
    curl_setopt($curl, CURLOPT_HEADER, false); 
    curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true); 
    $result = curl_exec($curl); 
    curl_close($curl); 
    return $result; 
} 

public function getImage(Request $request) 
{ 

$url = get_curl_content_tx('http://example.com/par?url='.$request->input('url')); 
$items = json_decode($url, true); 
$thumb = $items['thumbnail_url']; 

    return view('getImage',compact('thumb')); 
} 

Und hier ist die Form, in der Blattansicht

<div class="container"> 
     <form method="post" action="getImage" role="form"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="form-group"> 
         <input type="text" id="url" name="url" class="form-control" placeholder="Paste URL."> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="form-group"> 
         <button class="btn btn-success" id="submit">Search</button> 
        </div> 
       </div> 
      </div> 
     </form> 

     @if(!empty($thumb))  
      <img src="{{ $thumb }}" style="margin-bottom: 15px;">  
     @else            
      <p>There are no data.</p>    
     @endif 
    </div> 

Und das ist, was ich für AJAX gemacht habe und was ich denke nicht

ist Arbeit

$(document).ready(function() { 
    $('#submit').on('submit', function (e) { 
     e.preventDefault(); 
     var url = $('#url').val(); 
     $.ajax({ 
      type: "POST", 
      data: {url: url}, 
      success: function(msg) { 
       $("#ajaxResponse").append("<div>"+msg+"</div>"); 
      } 
     }); 
    }); 
}); 

Zur Zeit, als ich Suchtaste drücken der Fehler

TokenMismatchException

Ich verwende Laravel 5 und ich bin nicht sicher, wie es in Laravel die VerifyCsrfToken middleware auch für die CSRF Token Zusätzlich zu tun, als POST Parameter überprüft werden

Answer 1

, Überprüfen Sie den Anforderungsheader X-CSRF-TOKEN. Sie könnten zum Beispiel, speichern Sie die Token in einem HTML-Meta-Tag:

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

Dann, sobald Sie den Meta-Tag erstellt haben, können Sie eine Bibliothek wie jQuery anweisen, automatisch das Token für alle Request-Header hinzuzufügen. Dies ermöglicht eine einfache, bequeme CSRF Schutz für Ihre AJAX-basierte Anwendungen:

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

Mit Ihrer Ajax-Aufruf hinzufügen:

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

und versuchen Sie es erneut.

Reference

Answer 2

Sie können diese Lösung versuchen.

Hinzufügen von Meta-Tag in Header.

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

Während Sie auch dies in Skript hinzufügen müssen.

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

Ihr Problem in Laravel lösen wird 5.

Answer 3

Sie können dies versuchen:

Sie es einmal in ajaxSetup hinzufügen könnte und es werden alle Anrufe zu $.ajax oder Ajax-basierte Derivate beeinflussen wie $.get():

$.ajaxSetup({ 
    headers: 
    { 
     'X-CSRF-Token': $('input[name="_token"]').val() 
    } 
});