🕌
CSRF Token Mismatch
めちゃくちゃ沼った "CSRF Token Mismatch"について、備忘録として残します。
環境
Frontend: Next.js (App router)
Backend: Laravel
Breezeなど使用せずAPIエンドポイント目的でLaravelを使用
事象
LaravelのSanctumを使用した認証システムにおいて、CSRFトークンをセットしてリクエストを送っているにも関わらず、一生 CSRF Token Mismatchではじかれてしまう。
Axios VS Fetch
なんとなく、独学のころから使用していたFetchを利用していた。
どの記事見てもAxiosが定番そうだったがなんとなく移行させるのがめんどくさくてずっとFetchでやり切ろうとしていた。
ここに原因あり
ChatGPTに聞いてもLaravel側のConfigやらを見直しましょうとばかり言われるばかり。。。
試しにAxiosを使用したら一発でうまくいった。。。
移行するしか手はないのかとあきらめかけていた時現れたGitHubのIssue！！！
この方もFetchで同じ問題を抱えていたらしい。
内容を見てみると、
Fetchだとトークン最後の = が %3Dになっており、Axiosだと勝手にデコードしてくれていたのが原因。
CSRFトークンを取ってくる際に decodeURIComponent()入れたら問題なく秒で解決！！
こんなん気づかんて、、、、、
Discussion