【Laravel/Vue】postのパラメータの書き方ミスって419エラーと勘違いした話

はじめに

現在Laravel/Vue.jsでマッチングサイトを作っており、その際認証周りの経験が浅くしょうもないところで詰まってしまった話。

環境

vue@2.6.11
Laravel Framework 6.5.0
Firefox 73.0.1

起こったこと

php/laravel/vueを使ったSPAのマッチングサイトを作っており、お気に入り機能実装時にaxiosのpostメソッドを追加。
別の部分に書かれてるgetメソッドを一旦コピペしてpostに変え、パラメータを以下のように修正しました。
※コードはサンプル。

#コピペ元
    getBandList() {
      axios.get("/matching", {
          params: {
            offset: this.offset,
            limit: this.limit
          }
        })
        .then(res => {
          this.records = res.data.recordList;
        });
    },

#コピペ後
    addFavoriteList() {
      axios.post("/addFavorite", {
          params: {  //※ここが間違い
              hoge: 'hoge',
              fuga: 'fuga',
          }
     })
      .then(res => {
          this.message = res.data
        });
    },

#コントローラー
class FavoriteListController extends Controller
{
    public function addFavorite(Request $request)
    {
        $id = Auth::id();
        $hoge = $request->input('hoge');
        $fuga = $request->input('fuga');

    //なにかしらの処理
    ....
}

#web.php
Route::group(['middleware' => 'auth'], function () {
    Route::get('/addFavorite', 'FavoriteListController@addFavorite');
   ...
}

getメソッドをコピッたのでparamsを消し忘れており、500エラーが発生。問題はここから。


firefoxのデベロッパーツールで確認しており、ネットワークから500の部分をダブルクリックして、別タブでエラーの内容を確認しようとしました。


すると、419 Page Expired が。

ここで、419エラーと勘違いし、CSRF token関連のエラー記事を参考に試行錯誤を繰り返してしまいました。
※ちなみに、元のネットワーク画面の応答にサーバーのエラー内容ががっつりのってますw

色々と試してるうちに、他のpostメソッドでもネットワークをダブルクリックすると419ページに飛ぶことから、別タブで開いたことがCSRF token認証に失敗の原因であることに気が付きました。

ちなみに、上記操作をchromeで行うと500エラーの内容が表示されました。

firefoxではネットワークから別タブで開いた場合 token情報を持っていませんでしたが、chromeはtoken情報を持っていたため419が発生せず。
ブラウザ間でこういう違いもあるんですね。 (￣－￣)フーン ﾅﾙﾎﾄﾞ

終わりに

ちゃんとコンソール見ましょう。あと疲れたら早く寝ましょう。