Vue + Laravel Sanctum で CSRF トークンの不一致による 419 エラーが発生する
<p>「CSRF トークンが一致しません」というエラー メッセージとともに「419 (不明なステータス)」エラーを受け取りました。</p>
<p>POST http://127.0.0.1:8000/login 419 (不明ステータス)</p>
<p>CSRF トークンが一致しません。</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' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'スロットル:API',
\Illuminate\Routing\Middleware\SubstituteBindings::class、
]、
</code></pre>
<p>应用程序/model/User.php</p>
<pre class="lang-php prettyprint-override"><code><?php
名前空間 App\Models;
Illuminate\Database\Eloquent\Factories\HasFactory を使用します。
Illuminate\Notifications\Notifiable を使用します。
Laravel\Sanctum\HasApiTokens を使用します。
クラス ユーザーは Authenticatable を拡張します
{
HasApiTokens、HasFactory、Notifiable を使用します。
//...
}
</code></pre>
<p>配置/cors.php</p>
<pre class="lang-php prettyprint-override"><code><?php
戻る [
'パス' => [
'api/*',
'sanctum/csrf-cookie',
'登録する'、
'ログイン'、
]、
'allowed_methods' => ['*']、
'allowed_origins' => ['*']、
'allowed_origins_patterns' => []、
'allowed_headers' => ['*']、
'exused_headers' => []、
'max_age' => 0、
'supports_credentials' =>真実、
];
</code></pre>
<p>.env</p>
<pre class="brush:php;toolbar:false;">SESSION_DRIVER=cookie
SESSION_DOMAIN=ローカルホスト
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
構成を返す
})
</code></pre>
<p>src/views/auth/Login.vue</p>
<pre class="lang-js prettyprint-override"><code>「axios」から axios をインポートします
import { reactive } から '@vue/reactivity';
デフォルトのエクスポート {
設定（） {
const 資格情報 = リアクティブ({
Eメール： ''、
パスワード: ''、
})
const login = async () => {
axios.get('/sanctum/csrf-cookie').then( async () => {
let response = await axios.post('/login', credential)
console.log(応答);
});
}
return { ログイン、認証情報 }
}
};
</code></pre></p>
