Bei Vue + Laravel Sanctum tritt der Fehler 419 aufgrund einer Nichtübereinstimmung des CSRF-Tokens auf
<p>Ich habe den Fehler „419 (Unbekannter Status)“ mit der Fehlermeldung „CSRF-Token stimmt nicht überein“ erhalten.</p>
<p>POST http://127.0.0.1:8000/login 419 (unbekannter Status)</p>
<p>CSRF-Token stimmt nicht überein.</p>
<p>Laravel服务器:http://127.0.0.1:8000</p>
<p>Vue服务器:http://localhost:8080</p>
<p>应用程序/Http/Kernel.php</p>
<pre class="lang-php Prettyprint-override"><code>'api' => [
LaravelSanctumHttpMiddlewareEnsureFrontendRequestsAreStateful::class,
'throttle:api',
IlluminateRoutingMiddlewareSubstituteBindings::class,
],
</code></pre>
<p>应用程序/模型/User.php</p>
<pre class="lang-php Prettyprint-override"><code><?php
Namespace AppModels;
verwenden Sie IlluminateDatabaseEloquentFactoriesHasFactory;
verwenden Sie IlluminateNotificationsNotifiable;
Verwenden Sie LaravelSanctumHasApiTokens;
Klasse User erweitert Authenticatable
{
Verwenden Sie HasApiTokens, HasFactory, Notifiable;
//......
}
</code></pre>
<p>配置/cors.php</p>
<pre class="lang-php Prettyprint-override"><code><?php
zurückkehren [
'Pfade' => [
'api/*',
'sanctum/csrf-cookie',
'registrieren',
'Anmeldung',
],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => WAHR,
];
</code></pre>
<p>.env</p>
<pre class="brush:php;toolbar:false;">SESSION_DRIVER=Cookie
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:8080</pre>
<p>src/main.js</p>
<pre class="lang-js Prettyprint-override"><code>axios.interceptors.request.use((config) => {
config.baseURL = 'http://127.0.0.1:8000'
config.withCredentials = true
Konfiguration zurückgeben
})
</code></pre>
<p>src/views/auth/Login.vue</p>
<pre class="lang-js Prettyprint-override"><code>axios aus 'axios' importieren
import { reactive } from '@vue/reactivity';
Standard exportieren {
aufstellen() {
const credential = reactive({
Email: '',
Passwort: '',
})
const login = async () => {
axios.get('/sanctum/csrf-cookie').then( async () => {
let Response = waiting axios.post('/login', credential)
console.log(response);
});
}
return { login, credential }
}
};
</code></pre></p>
