Laravel SanctumのSPA認証 × Next.js(React) Axios で 'Request failed with status code 419', エラー解決

はじめに

タイトルの通り、Laravel SanctumのSPA認証をNext.jsでやろうとした時にハマった部分の解決法を備忘録として書いておきたいと思います。

環境

• Laravel 9.52.16
• Next.js 14.2.3
• React ^18
• Axios ^1.6.8

今回の方法で解決するであろう状況

LaravelのSPA認証は正常にできているものとします。
その上、CORSの設定はできていて、フロントやPostmanでリクエストした時、レスポンスヘッダーでX-XSRF-TOKENがある。

この条件下で、それでもaxiosでリクエストした時にRequest failed with status code 419エラーが発生する場合、今回の記事が役に立つかもしれません。

それとは別で、ハマっていた時に見て回ったサイトのURLを最後に貼っておくので、この記事で解決しなくともそちらの記事を見れば解決するかもしれません。

解決法

1 axios.defaults.withCredentialsを設定する。

🚨axios.createでwithCredentials: trueを指定しても動きません。🚨

必ず、axios.defaults.withCredentials　を記述してください。

例

    axios.defaults.withCredentials = true;
    await axios.get(url)...

2 withXSRFToken: trueおよびxsrfHeaderName: "X-XSRF-TOKEN"を設定する

こちらはaxios.create内に記述してもOKです。(少なくとも私の環境では大丈夫でした)

例

export const api = axios.create({
    baseURL: API_URL,
    withXSRFToken: true, // 追記
    xsrfHeaderName: "X-XSRF-TOKEN", // 追記
    headers: {
        "Content-Type": "application/json",
    },
});

おわりに

この2つの対処法を見つけるまでに時間がかかりました🥲
特にwithCredentialsをaxiosインスタンスに記述しても機能しないのはめちゃくちゃにハマりました...
この記事が役に立てば幸いです！

もしかしたら役に立つかもしれないリンク集