Vue + Laravel Sanctum menghadapi ralat 419 dengan ketidakpadanan token CSRF

Question

Saya menerima ralat "419 (Status Tidak Diketahui)" dengan mesej ralat "Ketakpadanan token CSRF."

POST http://127.0.0.1:8000/login 419 (status tidak diketahui)

Token CSRF tidak sepadan.

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

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

应用程序/Http/Kernel.php

<kod>'api' => [
    LaravelSanctumHttpMiddlewareEnsureFrontendRequestsAreStateful::class,
    'pendikit:api',
    IlluminateRoutingMiddlewareSubstituteBindings::class,
],
</code>

应用程序/模型/User.php

<code><?php

ruang nama AppModels;

gunakan IlluminateDatabaseEloquentFactoriesHasFactory;
gunakan IlluminateNotificationsNotifiable;
gunakan LaravelSanctumHasApiTokens;

class User extends Authenticatable
{
    gunakan HasApiTokens, HasFactory, Notifiable;
    //...
}

</code>

配置/cors.php

<code><?php

kembali [
    'laluan' => [
        'api/*',
        'sanctum/csrf-cookie',
        'daftar',
        'log masuk',
    ],
    'kaedah_yang dibenarkan' => ['*'],
    'asal_asal_boleh' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'umur_maks' => 0,
    'supports_credentials' => benar,
];

</code>

.env

SESSION_DRIVER=kuki
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:8080

src/main.js

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

    kembalikan konfigurasi
})
</code>

src/views/auth/Login.vue

<kod>import axios daripada 'axios'
import { reaktif } daripada '@vue/reactivity';

eksport lalai {
    persediaan() {

        kelayakan const = reaktif({
            e-mel: '',
            kata laluan: '',
        })

        log masuk const = async () => {
            axios.get('/sanctum/csrf-cookie').then( async () => {
                biarkan respons = tunggu axios.post('/login', kelayakan)
                console.log(respon);
            });
        }

        return {log masuk, kelayakan }
    }
};
</code>

Answer 1

Saya menghadapi masalah dengan isu yang sama ini. Selepas beberapa carian saya menjumpai halaman ini. Selepas melihat kemungkinan penyelesaian yang dicadangkan, saya mengubah suai

SANCTUM_STATEFUL_DOMAINS=localhost:8080

untuk

SANCTUM_STATEFUL_DOMAINS=http://localhost:8080

Maka ia akan baik-baik saja! Ia berfungsi dengan baik! !

Answer 2

Anda akan SANCTUM_STATEFUL_DOMAINS设置为localhost:8080 tetapi kod selebihnya menunjukkan anda menggunakan port 8000 dan bukannya 8080. Jika anda menukarnya kepada 8000 anda sepatutnya baik-baik saja.