通过 chrome 扩展登录 laravel nova 网络应用程序。 419 错误 csrf 令牌不匹配

Question

I get 419 error unknown status and csrf token mismatch, when I try to login in Laravel nova web app through chrome extension.当我尝试通过 chrome 扩展登录 Laravel nova 网络应用程序时，我收到 419 错误未知状态和 csrf 令牌不匹配。 I try to made exception verify csrf token for chrome extensions.我尝试对 chrome 扩展程序进行异常验证 csrf 令牌。 Is it possible login in that approach or should I use Laravel passport auth?是否可以使用这种方法登录，还是应该使用 Laravel 护照身份验证？

popup.js弹出窗口.js

const url = 'http://local.requestmapper.com/api/user/';

window.onload =  function(event) {
    const form = document.getElementById('login_form');

        var header = new Headers();

        header.append("Content-Type", "application/json");
        header.append("Accept", "application/json, text-plain, ");
        header.append('Access-Control-Allow-Origin', '*');
        header.append("X-Requested-With", "XMLHttpRequest");

        var formData = new FormData();
        for (var i = 0; i < form.length; ++i) {
            formData.append(form[i].name, form[i].value)
        }

    console.log(JSON.stringify(formData));

         fetch(url + 'login', {
            method: 'post',
            credentials: 'same-origin',
            headers: header,
            mode: 'no-cors',
            cache: 'default',
            body: formData,
        })
            .then(data => data.json()
            )
            .then(data => {console.log(data);
            })
            .catch((error) => {
                console.log('Error:', error);
             })

    //form.addEventListener('submit', login);
    event.preventDefault();
}

popup.html弹出窗口.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="csrf-token" content="{{ csrf_token()}}">
    <title>Login</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
   </head>
<body>
   <div class="form-group">
            <form method="post">
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" class="form-group" placeholder="example@mail.com">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" class="form-group" placeholder="passsowrd">
                </div>
            </form>
        </div>
</body>
<script type="text/javascript" src="popup.js"></script>
</html>

UserController.php用户控制器.php

   public function login(LoginRequest $request){
        $credentials = $request->only('email', 'password');

        if(Auth::attempt($credentials)){
            return response()->json(['status' => 'success'], 200);
        }
    }

VerifyCsrfToken.php验证CsrfToken.php

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    protected $except = [
        'chrome-extension://*'
    ];
}

Answer 1

update this更新这个

<?php

namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\VerifyCsrfToken as Middleware;

class VerifyCsrfToken extends Middleware
{
    protected $except = [
        'api/*'
    ];
}

as you using in chrome extensions so you need to set api/*当您在 chrome 扩展中使用时，您需要设置api/*

Answer 2

Now, I get 422 error, because somehow form data passed as empty array value, although I filled form.现在，我收到 422 错误，因为尽管我填写了表单，但不知何故表单数据作为空数组值传递。 Also, I edit popup.html file, forgot to insert name attribute as well as submit button另外，我编辑 popup.html 文件，忘记插入 name 属性以及提交按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="csrf-token" content="{{ csrf_token()}}">
    <title>Login</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
   </head>
<body>
    <div class="container">
        <div class="card card-default">
            <div class="card-header">Login</div>
            <div class="card-body">
                 <div class="form-group">
                <form method="post" id="login_form">
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="form-control" placeholder="example@mail.com">
                    </div>
                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" name="password" class="form-control" placeholder="passsowrd">
                    </div>
                    <button type="submit" class="btn btn-info">Login</button>
                </form>
                 </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="popup.js"></script>
</html>

通过 chrome 扩展登录 laravel nova 网络应用程序。 419 错误 csrf 令牌不匹配

问题描述

2 个解决方案

解决方案1
1 已采纳 2020-09-28 08:35:02

解决方案2
0 2020-09-28 10:04:41

通过 chrome 扩展登录 laravel nova 网络应用程序。 419 错误 csrf 令牌不匹配

问题描述

2 个解决方案

解决方案1 1 已采纳 2020-09-28 08:35:02

解决方案2 0 2020-09-28 10:04:41

解决方案1
1 已采纳 2020-09-28 08:35:02

解决方案2
0 2020-09-28 10:04:41