0

Vueとlaravelの組み合わせで開発をしております。
認証ライブラリとして、laravelのsunctumを使用しています。

apacheサーバーを立てて、そこにlaravelとlaravel内のresourcesにビルドしたvueを配置しております。
webにアクセスしてapiを呼び出すと「CSRF token mismatch」とエラーが出ます。

調べたこと、現状

  • ローカル環境では問題なく動く、apache上(192.168.179.5:8000)に置くと動かない
  • sunctumの「sanctum/csrf-cookie」でレスポンスのset-cookieが効いていない。
     (x-csrf-tokenは返ってきているが、ブラウザでブロック?されセットできていない。)
  • 上記のことから、cors関連の設定に不備があると思い、「cors.php」「.env」「Kernel.php」を色々編集してみている

エラー解消のため何かアドバイスを頂けると幸いです。
よろしくお願いいたします。


env (抜粋)

APP_URL=http://192.168.179.5
SESSION_DOMAIN=http://192.168.179.5:8000
SANCTUM_STATEFUL_DOMAINS=http://192.168.179.5:8000

cors.php

'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,

kernel.php

 protected $middleware = [
        // \App\Http\Middleware\TrustHosts::class,
        \App\Http\Middleware\TrustProxies::class,
        \Illuminate\Http\Middleware\HandleCors::class,
        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array<string, array<int, class-string|string>>
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
           \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
           \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Session\Middleware\StartSession::class,

        ],
    ];
1
  • cors関連の設定に不備がある・・・ということなら CORS 関係のエラーが出ているはずですが、出てますか? ブラウザのディベロッパーツールでどういうエラーが出ているか調べてください。
    – WebSurfer
    Commented 4月25日 21:41

1 件の回答 1

0

CSRFのエラーであればAPI実行時のCSRF Tokensを付与、ヘッダーに X-CSRF-TOKEN を設定することで解決できるかと思います。
https://laravel.com/docs/11.x/csrf#csrf-x-csrf-token
公式ドキュメントではjQueryの例を記載していますが、axiosなどAPI実行時のライブラリに合わせてヘッダー値を指定してください。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。