Vue + Laravel Sanctum rencontre une erreur 419 avec une incompatibilité de jeton CSRF

Question

J'ai reçu une erreur « 419 (État inconnu) » avec le message d'erreur « Incompatibilité de jeton CSRF. »

POST http://127.0.0.1:8000/login 419 (statut inconnu)

Le jeton CSRF ne correspond pas.

Laravel服务器：http://127.0.0.1:8000

Vue服务器：http://localhost:8080

应用程序/Http/Kernel.php

<code>'api' => [
    LaravelSanctumHttpMiddlewareEnsureFrontendRequestsAreStateful::class,
    'accélérateur:api',
    IlluminateRoutingMiddlewareSubstituteBindings::class,
],
</code>

应用程序/模型/User.php

<code><?php

Modèles d'application d'espace de noms ;

utilisez IlluminateDatabaseEloquentFactoriesHasFactory ;
utilisez IlluminateNotificationsNotifiable ;
utilisez LaravelSanctumHasApiTokens ;

L'utilisateur de classe étend Authenticatable
{
    utilisez HasApiTokens, HasFactory, Notifiable ;
    //...
}

</code>

配置/cors.php

<code><?php

retour [
    'chemins' => [
        'API/*',
        'sanctum/csrf-cookie',
        'registre',
        'se connecter',
    ],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => vrai,
];

</code>

.env

SESSION_DRIVER=cookie
SESSION_DOMAIN=hôte local
SANCTUM_STATEFUL_DOMAINS=localhost:8080

src/main.js

<code>axios.interceptors.request.use((config) => {
    config.baseURL = 'http://127.0.0.1:8000'
    config.withCredentials = vrai

    retourner la configuration
})
</code>

src/views/auth/Login.vue

<code> importer des axios depuis 'axios'
importer { réactif } depuis '@vue/reactivity' ;

exporter par défaut {
    installation() {

        informations d'identification const = réactif ({
            e-mail: '',
            mot de passe: '',
        })

        const login = async () => {
            axios.get('/sanctum/csrf-cookie').then( async() => {
                let réponse = attendre axios.post('/login', informations d'identification)
                console.log(réponse);
            });
        }

        return { login, identifiant }
    }
} ;
</code>

Answer 1

J'ai des problèmes avec ce même problème. Après plusieurs recherches, j'ai trouvé cette page. Après avoir vu les solutions suggérées possibles, j'ai modifié

SANCTUM_STATEFUL_DOMAINS=localhost:8080

pour

SANCTUM_STATEFUL_DOMAINS=http://localhost:8080

Alors tout ira bien ! Ça fonctionne bien! !

Answer 2

Vous le ferez SANCTUM_STATEFUL_DOMAINS设置为localhost:8080 mais le reste du code montre que vous utilisez le port 8000 au lieu de 8080. Si vous le changez à 8000, ça devrait aller.