Sanctum React SPA 返回 419 页面已过期

Question

我是 laravel 和 sanctum 的新手，在我遵循 laravel 文档 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 将它设置在 header。

对于后端，我在 Kernel.php

中添加了 EnsureFrontEndRequestAreStateful class

  '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 中的 'expiration' 值，但无济于事。

我的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。这里有：

 "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

Sanctum React SPA 返回 419 页面已过期

Sanctum with react SPA returning 419 page expired

php

laravel

reactjs

laravel-sanctum