Simple ajax search with Laravel return token mismatch

Question

I'm not familiar that much with jquery/ajax and will appreciated some help. I'm trying to make simple ajax search which make curl request and return the result. Everything works fine if I don't use ajax for the search.

This is my 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'));
}

And here is the form in the blade view

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

And this is what I've made for ajax and which I think isn't work

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

Currently when I press search button the error is

TokenMismatchException

I'm using Laravel 5 and I'm not sure how to do it into laravel

Okay, I've made it like in this answer https://stackoverflow.com/a/37912362/1158599 but still TokenMissmatch — Jason Paddle, Jun 30 '17 at 11:18
Take a moment to view this question might solve your problem https://stackoverflow.com/questions/44819418/ways-to-prevent-tokenmismatch-exception-in-ajax#44819418 — Sagar Gautam, Jun 30 '17 at 11:19
Possible duplicate of [Laravel csrf token mismatch for ajax POST Request](https://stackoverflow.com/questions/32738763/laravel-csrf-token-mismatch-for-ajax-post-request) — Niklesh Raut, Jun 30 '17 at 11:20

Mayank Pandeyz · Accepted Answer · 2017-06-30T11:21:56.437

2

In addition to checking for the CSRF token as a POST parameter, the VerifyCsrfToken middleware will also check for the X-CSRF-TOKEN request header. You could, for example, store the token in a HTML meta tag:

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

Then, once you have created the meta tag, you can instruct a library like jQuery to automatically add the token to all request headers. This provides simple, convenient CSRF protection for your AJAX based applications:

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

With in your ajax call add this:

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

and try again.

Reference

edited Jun 30 '17 at 11:21

answered Jun 30 '17 at 11:18

Mayank Pandeyz

25,704
4
40
59

This `X-CSRF-TOKEN` something new for me and I don't understand why is checking for this too. Will read the docs. Thanks – Jason Paddle Jun 30 '17 at 11:21
1

This token is used to protect your application from `cross-site request forgery (CSRF)` attacks. – Mayank Pandeyz Jun 30 '17 at 11:22

score 1 · Answer 2 · answered Jun 30 '17 at 11:19

You can try this solution.

Add meta tag in Header.

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

While you also need to add this in script.

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

This will resolve your issue in laravel 5.

score 1 · Answer 3 · edited Jun 30 '17 at 12:27

1

You can try this:

you could add it one time in ajaxSetup and it will affect all calls to $.ajax or Ajax-based derivatives such as $.get() :

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

edited Jun 30 '17 at 12:27

linktoahref

7,812
3
29
51

answered Jun 30 '17 at 11:19

AddWeb Solution Pvt Ltd

21,025
5
26
57

This solution is incomplete, you must add – José Neto Jun 30 '17 at 12:54

Simple ajax search with Laravel return token mismatch

3 Answers3