フロントエンドで Laravel Sanctum を使用して CSRF Coo​​kie を生成できない

Question

最近、Nuxt 3 での認証に Laravel Sanctum を使用しようとしましたが、最初の CSRF Coo​​kie ハンドシェイク中に問題が発生しました。問題は、http://localhost:8000/sanctum/csrf-cookie パスにリクエストを行った後、ブラウザーによって XSRF-TOKEN Cookie が設定されないことです。私は一週間この問題に悩まされていますが、インターネット上で解決策が見つかりません。 Axios と Fetch API を使用して XSRF-TOKEN を設定しようとしましたが、成功しませんでした。バックエンドで http://localhost:8000 を使用し、フロントエンドで http://localhost:3000 を使用しています。 Laravel Sanctum自体は、Postmanでテストするときにset-cookieヘッダーを受け取りますが、ブラウザーでは受け取らないため、正常に動作します。 .env ファイルに次のプロパティを設定します。

FRONTEND_URL=http://localhost:3000
    SESSION_DOMAIN=ローカルホスト:3000
    SESSION_DRIVER=cookie

フロントエンドでの CORS リクエストの制限を克服するためにあらゆる努力をしてきました。私のフェッチ関数は次のようになります:

window.fetch('http://localhost:8000/sanctum/csrf-cookie', {
        資格情報: '含む',
      }).then((応答) => {
        console.log(…response.headers)
      })

資格情報を「include」に設定すると問題を解決できると読みましたが、それでも XSRF-TOKEN を設定できません。資格情報を「同じオリジン」に設定しようとしましたが、それも機能しませんでした。この問題の解決方法を知っている人はいますか?

Answer 1

問題は、ブラウザが異なるポートからの Cookie を受け入れないことです。

バックエンドはポート 8000 で実行され、フロントエンドはポート 3000 で実行されるため、バックエンドによって提供される Cookie はフロントエンドに設定されません。

したがって、回避策は、API エンドポイントに対してのみ CSRF 保護を無効にすることです。 これは、VerifyCsrfToken ミドルウェアで実行できます。

この行を $Except 配列に追加すれば準備完了です。