为什么我的 CSRF 令牌与 Laravel 和 Sanctum 不匹配？

Question

我有一个 Laravel 后端和反应前端，我使用 sanctum 进行 SPA 身份验证，并使用 Axios 来提出我的请求。 我在 http://localhost:8000 上使用 localhost，在 http://localhost:3000 上使用前端。

这是我的前端代码：

const apiClient = axios.create({
    baseURL: `http://localhost:8000`,
    withCredentials: true,
});    

let config = {
    headers: {
        'Content-Type': 'application/json'
    },
}

export async function login(credentials: LoginCredentials) {

    return apiClient.get('sanctum/csrf-cookie', config).then(response => {
        apiClient.post('/api/v1/login', JSON.stringify(credentials));
    });
}

我的 api 中间件 class 看起来像这样

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

这些是我的圣所配置；

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:3000,localhost:3000/api/v1/login,127.0.0.1,127.0.0.1:8000,::1',
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
    ))),

SESSION_DOMAIN=http://localhost:3000

最后是我的 cors 中间件

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

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

我很确定我错过了一些小事。 任何帮助将不胜感激

Answer 1

因为您使用的是 post 方法。您有两种方法可以解决此问题：

1-使用get方法

2- go 到这个路径

app/http/middleware/VerifyCsrfToken.php

并在里面设置你的路径

protected $except = []

对于异常 csrf 令牌。

Answer 2

您遇到此问题的原因是您需要先点击 csrf-cookie 才能登录或注册（当您发送帖子但未登录时，您将遇到同样的问题。）

await this.$axios({ url: "/v1/sanctum/csrf-cookie" });

文档https://laravel.com/docs/8.x/sanctum#csrf-protection中也提到了这一点

您可以使用php artisan route:list找到 csrf-cookie 路由

您还可以在 config/santrum 'prefix' => 'api/v1/sanctum'中设置自己的 csrf-cookie 路由

Answer 3

在你的后端环境中设置它

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost