jquery - 从 google chrome 扩展到 Laravel 5.5 应用程序的 Ajax 发布请求

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

我是网络开发新手。 我正在开发一个带有 google chrome 扩展的 laravel 应用程序,以使用 jquery ajax 向 laravel 应用程序发送发布请求。

当我在 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

最佳答案

使用您的 api.php 路由。为了安全起见,您可以使用 Laravel Passport 或类似的东西来创建 token 来验证您的用户或访问 token 。

希望这有帮助!

关于jquery - 从 google chrome 扩展到 Laravel 5.5 应用程序的 Ajax 发布请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48250020/

相关文章:

javascript - 为什么不模拟 Tab 键按下将焦点移动到下一个输入字段?

Javascript替换为不影响字符串的正则表达式

WordPress 的 php 表单处理

python - 通过 ajax 调用 Flask 更改来自另一个驱动器的图像源

php - Laravel 5 需要使用 Apache 虚拟主机的 index.php

jquery - 如何通过 JavaScript 验证 Azure Active Directory 是否过期

javascript - Chrome - 阻止脚本在页面中运行

ajax - 从 Javascript 异步调用 Magento 时出现随机错误

Laravel 5 GET 正在运行,但 POST 方法不起作用

php - 返回与多个查询标签匹配的搜索结果?