带有 React SPA 返回 419 页面的 Sanctum 已过期

Question

我是 laravel 和 sanctum 的新手，在我关注 laravel doc for sanctum 之后，我收到响应 419 页面已过期。 我在前端使用 react，这是我的 fetch

 fetch("/sanctum/csrf-cookie", {
        credentials: "include"
    }).then(() => {
        let cookies = document.cookie.split("=");
        let token = cookies[1];
        fetch("api/login", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Access-Control-Allow-Credentials": "true",
                credentials: "include",
                "X-CSRF-TOKEN": token
            },
            body: JSON.stringify(this.state)
        })
            .then(res => {
                status = res.status;
                return res.json();
            })
            .then(res => {
                if (status == 400) {
                    this.setState({ ...this.state, errors: res.body });
                    this.setAlerts();
                } else if (status == 401) {
                } else if (status == 201) {
                    this.props.history.push("/login");
                }
            });
    });

首先我得到 cookie，然后我使用这个 cookie 将它设置在标题中。

对于后端，我在 Kernel.php 中添加了 EnsureFrontEndRequestAreStateful 类

  'api' => [
        'throttle:api',
        EnsureFrontendRequestsAreStateful::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class
    ],

这是我的 cors.php

    /*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/

'paths' => ['api/*','sanctum/csrf-cookie'],

'allowed_methods' => ['*'],

'allowed_origins' => ['http://localhost:3000','http://127.0.0.1:8000'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => true,

在 session.php 中我都试过了：

'domain' => env('SESSION_DOMAIN', 'localhost:3000, 127.0.0.1:8000'),

还有这个：

'domain' => env('SESSION_DOMAIN', null),

反应还是一样。 我试图更改 sanctum.php 中的“过期”值，但无济于事。

我的 Api 路线

Route::post('/login','App\Http\Controllers\UserController@login');

还有我的带有登录功能的控制器

public function login(UserLogin $request){
    $request->validated();
    $user = $this->userService->login($request);
    if($user === null){
        return response('There is no such combination of email and password', 422);
    }
    return response($user, 200);
}

我找不到或至少我无法识别与我相同的问题。如果这是一个愚蠢的问题或已经回答但我真的找不到任何类似的问题，我提前道歉。

更新： 我忘了添加请求标头。这里有：

 "headers": [
        {
            "name": "Accept",
            "value": "*/*"
        },
        {
            "name": "Accept-Encoding",
            "value": "gzip, deflate"
        },
        {
            "name": "Accept-Language",
            "value": "en-GB,en;q=0.5"
        },
        {
            "name": "Access-Control-Allow-Credentials",
            "value": "true"
        },
        {
            "name": "Connection",
            "value": "keep-alive"
        },
        {
            "name": "Content-Length",
            "value": "41"
        },
        {
            "name": "Content-Type",
            "value": "application/json"
        },
        {
            "name": "Cookie",
            "value": "XSRF-TOKEN=eyJpdiI6InFPQkdZYXQ0ZHAydHVWcDVISWZnVkE9PSIsInZhbHVlIjoiYldObmtKSmdYeVFmMUE5WnBoK044RVhJbVUyZXdpeWh2RXd1UGtYa2taSWVjL1lXKzNIdmVPLy9jWi9MbEJPN0pEOWxCbGNzTUs2NklEZFZMRHZNRDFndFRIM2JveUtoUklQalliSE9iQnhUS0hHLzk1dDlDYWt2aU94R1d2NXMiLCJtYWMiOiI4MzZlZmZkOGUxYTkzZDU2ZjZiNTdhM2FkMTA1N2VjZDg1NzU2MGM5M2IyYmI0NjJiYjEzYTg3OWUxOTY3NzcxIn0%3D; laravel_session=eyJpdiI6IjYzQkp2UjVnWEsyTklkclNUaERXd0E9PSIsInZhbHVlIjoiemRSL3ZuVXltZXI0dksvWDJ2R282aG43MVo2c2RXK1hkRDNEZ05IK01BNFRzTWJ0ZmErd3lESUJIdUxVRWF4ZW04dlJRanh3SGNMQklSK3hHNFFvRDBmZkVSaVYya3lCWWJYK2FHeEdMY2lEb2Y0aDFqWmUxUkgrQ2YvWWNuQTMiLCJtYWMiOiJmNzRmMWFmNDJiNjFlNTRmNDJlMzljNGNmZjMxYzY3OGYxOTUwYTFmZDIyMDBiOWE5OTgwN2EzODMwNTBlOTIyIn0%3D"
        },
        {
            "name": "credentials",
            "value": "include"
        },
        {
            "name": "Host",
            "value": "127.0.0.1:8000"
        },
        {
            "name": "Origin",
            "value": "http://127.0.0.1:8000"
        },
        {
            "name": "Referer",
            "value": "http://127.0.0.1:8000/login"
        },
        {
            "name": "User-Agent",
            "value": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:84.0) Gecko/20100101 Firefox/84.0"
        },
        {
            "name": "X-XSRF-TOKEN",
            "value": "eyJpdiI6InFPQkdZYXQ0ZHAydHVWcDVISWZnVkE9PSIsInZhbHVlIjoiYldObmtKSmdYeVFmMUE5WnBoK044RVhJbVUyZXdpeWh2RXd1UGtYa2taSWVjL1lXKzNIdmVPLy9jWi9MbEJPN0pEOWxCbGNzTUs2NklEZFZMRHZNRDFndFRIM2JveUtoUklQalliSE9iQnhUS0hHLzk1dDlDYWt2aU94R1d2NXMiLCJtYWMiOiI4MzZlZmZkOGUxYTkzZDU2ZjZiNTdhM2FkMTA1N2VjZDg1NzU2MGM5M2IyYmI0NjJiYjEzYTg3OWUxOTY3NzcxIn0%3D"
        }
    ]

更新：修正了 XSRF cookie 中的错字

Answer 1

将以下密钥添加到您的.env：

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost