Vue + Laravel Sanctum で CSRF トークンの不一致による 419 エラーが発生する

Question

「CSRF トークンが一致しません」というエラー メッセージとともに「419 (不明なステータス)」エラーを受け取りました。

POST http://127.0.0.1:8000/login 419 (不明ステータス)

CSRF トークンが一致しません。

Laravel サービス务器：http://127.0.0.1:8000

Vue サービス务器：http://localhost:8080

应用程序/Http/Kernel.php

<code>'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'スロットル:API',
    \Illuminate\Routing\Middleware\SubstituteBindings::class、
]、
</code>

应用程序/model/User.php

<code><?php

名前空間 App\Models;

Illuminate\Database\Eloquent\Factories\HasFactory を使用します。
Illuminate\Notifications\Notifiable を使用します。
Laravel\Sanctum\HasApiTokens を使用します。

クラス ユーザーは Authenticatable を拡張します
{
    HasApiTokens、HasFactory、Notifiable を使用します。
    //...
}

</code>

配置/cors.php

<code><?php

戻る [
    'パス' => [
        'api/*',
        'sanctum/csrf-cookie',
        '登録する'、
        'ログイン'、
    ]、
    'allowed_methods' => ['*']、
    'allowed_origins' => ['*']、
    'allowed_origins_patterns' => []、
    'allowed_headers' => ['*']、
    'exused_headers' => []、
    'max_age' => 0、
    'supports_credentials' =>真実、
];

</code>

.env

SESSION_DRIVER=cookie
SESSION_DOMAIN=ローカルホスト
SANCTUM_STATEFUL_DOMAINS=localhost:8080

src/main.js

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

    構成を返す
})
</code>

src/views/auth/Login.vue

<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>

Answer 1

これと同じ問題で困っています。何度か検索した結果、このページを見つけました。考えられる提案された解決策を確認した後、

を変更しました リーリー ＃＃＃のために＃＃＃ リーリー

それなら大丈夫です！うまくいきます！ ！

Answer 2

SANCTUM_STATEFUL_DOMAINS を localhost:8080 に設定しましたが、コードの残りの部分では、ポート 8080 ではなくポート 8000 を使用していることが示されています。 8000に変更すれば大丈夫です。