使用Laravel返回令牌不匹配的简单ajax搜索

时间:2017-06-30 11:14:10

标签: php ajax laravel laravel-5

我对jquery / ajax并不熟悉,并会对一些帮助表示赞赏。我试图进行简单的ajax搜索,它会产生curl请求并返回结果。如果我不使用ajax进行搜索,一切正常。

这是我的控制器

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

这是刀片视图中的表单

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

这就是我为ajax所做的,我认为它不起作用

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

目前,当我按下搜索按钮时,错误是

  

TokenMismatchException

我使用的是Laravel 5,我不确定怎么做到laravel

3 个答案:

答案 0 :(得分:2)

除了检查CSRF令牌作为POST参数外,VerifyCsrfToken middleware还将检查X-CSRF-TOKEN请求标头。例如,您可以将令牌存储在HTML元标记中:

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

然后,一旦创建了元标记,就可以指示像jQuery这样的库自动将标记添加到所有请求标头中。这为基于AJAX的应用程序提供了简单,方便的CSRF保护:

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

在你的ajax调用中添加:

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

再试一次。

Reference

答案 1 :(得分:1)

您可以尝试此解决方案。

在标题中添加元标记。

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

虽然您还需要在脚本中添加它。

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

这将解决您在laravel 5中的问题。

答案 2 :(得分:1)

你可以试试这个:

您可以在ajaxSetup中添加一次,它会影响对$.ajax或基于Ajax的衍生产品(例如$.get())的所有调用:

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