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

Posted 2023-02-24

【中文标题】使用 Laravel 返回令牌不匹配的简单 ajax 搜索

【英文标题】：Simple ajax search with Laravel return token mismatch

【发布时间】：2017-12-04 08:03:37

【问题描述】：

我对 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 中使用它

【问题讨论】：

post方法中需要添加csrf_token

好的，我已经在这个答案***.com/a/37912362/1158599 中做到了，但仍然是 TokenMissmatch

花点时间看看这个问题可能会解决你的问题***.com/questions/44819418/…

Laravel csrf token mismatch for ajax POST Request的可能重复

【参考方案1】：

除了检查 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

【讨论】：

这X-CSRF-TOKEN 对我来说是新事物，我不明白为什么还要检查这个。将阅读文档。谢谢

此令牌用于保护您的应用程序免受cross-site request forgery (CSRF) 攻击。

【参考方案2】：

您可以尝试此解决方案。

在 Header 中添加元标记。

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

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

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

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

【参考方案3】：

你可以试试这个：

您可以在ajaxSetup 中添加一次，它将影响对$.ajax 或基于Ajax 的派生类（例如$.get()）的所有调用：

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

【讨论】：

这个解决方案不完整，必须添加