Question

当我尝试通过Chrome扩展程序登录Laravel nova网络应用程序时，出现419错误未知状态和csrf令牌不匹配。我尝试对Chrome扩展程序进行异常验证CSRF令牌。是否可以通过这种方式登录，或者我应该使用Laravel护照身份验证？

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

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

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

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

VerifyCsrfToken.php

<?php

namespace App\Http\Middleware;

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

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

Answer 1

更新此

<?php

namespace App\Http\Middleware;

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

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

在chrome扩展程序中使用时，因此需要设置api/*

Answer 2

现在，我收到422错误，因为尽管我填写了表单，但表单数据以某种方式作为空数组值传递。另外，我编辑popup.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="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 个答案: