从Google Chrome扩展程序到Laravel 5.5应用程序的Ajax发布请求

时间:2018-01-14 13:23:26

标签: jquery ajax laravel-5 google-chrome-extension csrf

我是网络开发新手。 我开发了一个带有Google Chrome扩展程序的laravel应用程序,可以使用jquery ajax向laravel app发送帖子请求。

当我在App \ Http \ Kernel.php

中评论此行\App\Http\Middleware\VerifyCsrfToken::class,

我的表单已发布,我点击状态代码:200。

但如果我取消注释该行,我会获得状态代码:419。

这是我的popup.html代码:

  <!doctype html>
<html>
<head>
    <meta charset="utf-8">

<meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="styles/font-awesome.min.css">
    <link href="styles/main.css" rel="stylesheet">

    <script src="scripts/jquery-3.2.1.min.js"></script> 
    <script src="scripts/popup.js"></script>

</head>
<body>

    <div class=" form-group content">
        <p>
            <h1 class="title"></h1>
        </p>
        <div>
            <form id="form" method="POST" action="https://app.test/">
<input type="url" name="url" id="input" class=" form-control form-group input" autocomplete="off">


                <div class="formbtn">
                    <button id="button" class="btn" type="submit">Publish </button>
                </div>
            </form>
        </div>
    </div>

</body>
</html>

这是我的popup.js代码:

 taburl = "";
chrome.tabs.query(
{
    active: true,
    lastFocusedWindow: true
}, 
function(tabs) {
    // and use that tab to fill in out title and url
    var tab = tabs[0];
    var  link = tab.url;
    $("#input").val(link);
    var str = tab.title;
    var res = str.substring(0,20);
    $('.title').html(res+ '...');

    taburl = link;
}
);


$(document).ready(function() {
$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#button").on("click", ajaxCall);

});

$("#input").val(taburl);

function ajaxCall(element) {
$.ajax({
        url : "https://app.test/",
        data : {
            "_token":"{{ csrf_token() }}",
            "url" : taburl,
            },
        method : "POST",
        success : function(data) {
            alert("sent url = " + taburl);
        }
});
}



 Here is the screenshot of the network tab:

Here is screenshot of the response header

2 个答案:

答案 0 :(得分:4)

请改用api.php路线。为了安全起见,您可以使用laravel passport或类似的东西来创建令牌来验证您的用户或访问令牌。

希望这有帮助!

答案 1 :(得分:-2)

与此处几乎相同: Get button clicked with chrome extension

你应该使用内容脚本,你的弹出窗口会“休眠”直到用户打开它。