Axiosアップデートでaxioserror: request failed with status code 419

はじめに

LaravelをAPIにしてフロントをNext.jsで開発しているサービスで、Axiosを1.6.0へアップデートしたところ、419エラーが発生。

axioserror: request failed with status code 419

原因

AxiosでXSRFの脆弱性が発見され、修正された1.6.0バージョンではwithCredentialsオプションでトークンが自動送信されなくなった?

Axios Cross-Site Request Forgery Vulnerability

https://github.com/advisories/GHSA-wf5p-g6vw-rhxx

解決法

  • Axiosを1.6.2にアップデートする
  • withXSRFTokenオプションを有効にする

withXSRFTokenオプションは、withCredentialsオプションの以前の動作(トークンを送信)をするために新しく設定されたオプションで、デフォルトではfalse

例えば以下のように追加する。

import Axios from 'axios'

const axios = Axios.create({
    baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
    },
    withCredentials: true,
    withXSRFToken: true, // これを追加
})

export default axios

参考

Release Release v1.6.2 · axios/axios

https://github.com/axios/axios/releases/tag/v1.6.2

feat(withXSRFToken): added withXSRFToken option as a workaround to achieve the old withCredentials behavior; #6046

https://github.com/axios/axios/pull/6046