Laravelのapi.phpでMiddlewareにwebを指定すると"CSRF token mismatch."と出る

Question

やりたい事

やりたいSNSのようなものを開発しております。

laravelのapi.phpで設定したルーティングにMiddlewareでwebを指定したい。

起きたこと、試したこと

api.phpで、以下のようなものを記述いたしました。

Route::post('hogehoge/insert', 'HogehogeController@insert')->middleware('web');

この結果がこちらです。

CSRF token mismatch.

CSRFトークンがミスマッチしているとのことです。

おかしい、CSRFトークンはきちんと設定されているはずなのです。

ヘッダーにはちゃんと

X-XSRF-TOKENの項目があります。

不思議なのが、

apiファイルではなくwebファイルに記述した時はこのエラーが起きないということです。

Route::post('hogehoge/insert', 'hogehogeController@insert');

このように殆ど同じ内容のものを用意しました。

vue-router,vue,axiosの環境でやっているのですが、

axiosのurlも

axios.post('/api/concept/insert', {

}).then(function(response) {
    alert(response.data)
}.bind(this)).catch(function(error) {
    console.log(error);
    alert('項目に問題があるか、プログラムに異常があるようです。')
}.bind(this));

から、

axios.post('/concept/insert', {

}).then(function(response) {
    alert(response.data)
}.bind(this)).catch(function(error) {
    console.log(error);
    alert('項目に問題があるか、プログラムに異常があるようです。')
}.bind(this));

にしました。

この場合だと先程のようなエラーは起きません。

web.phpでのルーティングと、api.phpでMiddlewareにwebを指定した場合でのルーティングでは何が違うのでしょうか。

その他の実験

api.phpでのMiddleware指定をwebではなくapiにするとエラーは出ませんが、代わりにログインした状態でもAuth::check()の結果がfalseになります。やろうとしている処理にログインしているかどうかが必要なので、これはきちんと動作してもらう必要があります。

環境

laravel 7
vue 2.6.11
vuex
vue-router

Answer 1

その後試行錯誤を続けまました。

api.phpのルーティングで

CSRF token mismatch.

が出るとき、同じ内容のルーティングをweb.phpに書くとこっちは動きます。

しばらくすると何故かweb.phpのルーティングが機能しなるのですが、不思議な事にそうしたタイミングではapi.phpのルーティングが機能します。

しばらくするとまたapi.phpは機能しなくなるので、そのときはweb.phpのルーティングを有効化します。

エラーが起きる度にルーティングの記述を移動するのは面倒なので

if (true) {}

みたいなのを作って、切り替えを効率化したりしていました。

とはいえ、これでは開発ができても、本番環境に移す事が出来ません。

しばらく考えていると、ちょっとした事に気づきました。

このサイトは、vue-routerを用いてSPA化しています。

vue-routerの管轄範囲を最大化するために、Laravelのweb.phpほうで少し特殊なルーティングを設定していました。

Route::get('{any}', function () {
    return view('index');
})->where('any', '.*');

これはいわば全てのurlをviewのindexにマッチさせるというルーティングです。

これはweb.phpの最後に置かれていているので、それより上にかかれたurlにマッチすればそこにルーティングされます。

そこで、もしかしたらweb.phpとapi.phpが読み込まれる順番って決まっていないのでは…？とひらめきました。

つまりは、web.phpから先に読み込まれた場合はapi.phpのルーティングは{any}より優先順位が低いのでマッチされず、**CSRF token mismatch.**になる、逆にapi.phpから読み込まれた場合は{any}よりapi.phpのルーティングの優先順位が高くなるので、通る。

という事では？という仮説をたて、

api.phpにかかれているルーティングを全て消し、web.phpの{any}の上にもってきました。

すると…エラーがおこらない！ifを切り替える必要もない！

という事で解決致しました。もやもやは残りますがそんな感じです。

{any}にapiを除外する機能でもあればいいんですけどね。あったら教えて下さい。

Answer 2

app/Http/Kernel.php

    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            'throttle:60,1',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

Route::post('hogehoge/insert', 'HogehogeController@insert')->middleware('web');

と設定することは、app/Http/Kernel.php の web 全てを適用するということです。
当たっている　middleware の数が多ければ、制限はキツくなる。

api 通信では、session 使えなくなるので当然CSRFトークンは使えない。セキュリティの問題からCSRFを防ぎたいという要請は理解できるが、API通信のためにセキュリティを別の方法で担保すべくOauth2など別の仕組みがある。

Comments

[scrollman]

なんとか自分で解決できました。回答いただきありがとうございます。