Laravel Sanctum & React with Axios，POST return 419

Question

这几天我很绝望，因为我似乎无法克服这个简单的问题。

我无法验证由 Sanctum Laravel

提供支持的 SPA（通过 Axios 作出反应）

我已阅读文档并阅读 man 教程和问题。有些问题我已经克服了。

最终，我陷入了这个：

我的请求包含 X-CSRF-TOKEN，但它总是 returns 419“消息：CSRF 令牌不匹配。”

这是我的网页截图：

可以看出，“登录”post 请求已发送 CSRF 令牌。第二张图是同一个请求的cookie标签。

但是最后还是返回了419

我目前不知道该做什么

请帮忙

非常感谢

P.S。由于我目前迷路了，我不知道应该附上我的代码的哪一部分，所以为了避免大家阅读大量无用的代码部分，我并没有 post 在我的初始部分问题，但无论如何，请询问我应该附上哪部分代码以进一步阐明我的问题

附件：

Laravel 的 .env

SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_SECURE_COOKIE=false
SESSION_DOMAIN=.localhost
SANCTUM_STATEFUL_DOMAINS=localhost:3000,localhost:8000,127.0.0.1:3000,127.0.0.1:8000

我的react axios函数

export const sendLogin = (data) => {
    axios.defaults.withCredentials = true;
    const response = axios.get(apiUrl('sanctum/csrf-cookie','backend-non-api-route')).then(response => {
        return axios.post(apiUrl('user/login','backend-non-api-route'),data,{ 
            xsrfHeaderName: 'X-CSRF-Token',
            withCredentials: true
          });
    })
    return response;
}

注意：apiUrl() 函数只是附加 Laravel 的 URL

app/http/Kernel.php

    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \App\Http\Middleware\HandleInertiaRequests::class,
        ],

        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            //\Illuminate\Session\Middleware\StartSession::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

    
    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    ];
}

Answer 1

试试这个：

export const sendLogin = (data) => {
    axios.defaults.withCredentials = true;
    const response = axios.get(apiUrl('sanctum/csrf-cookie','backend-non-api-route')).then(response => {
        return axios.post(apiUrl('user/login','backend-non-api-route'),data,{ 
            xsrfHeaderName: "X-XSRF-TOKEN", // change the name of the header to "X-XSRF-TOKEN" and it should works
            withCredentials: true
          });
    })
    return response;
}

编辑：阅读 Sanctum 文档我得到了这段文档：

During this request, Laravel will set an XSRF-TOKEN cookie containing the current CSRF token. This token should then be passed in an X-XSRF-TOKEN header on subsequent requests, which some HTTP client libraries like Axios and the Angular HttpClient will do automatically for you. If your JavaScript HTTP library does not set the value for you, you will need to manually set the X-XSRF-TOKEN header to match the value of the XSRF-TOKEN cookie that is set by this route.

和 this another answer 表示您必须只使用其中之一（X-CSRF-TOKEN 和 X-XSRF-TOKEN）。

Laravel Sanctum & React with Axios，POST return 419

Laravel Sanctum & React with Axios, POST return 419

php

reactjs

laravel

axios

laravel-sanctum