Laravel SPA token mismatch 419

bootstrap.ts

import axios from 'axios'
import createAuthRefreshInterceptor from 'axios-auth-refresh'

const getCSRFToken = () => {
  const token: HTMLMetaElement | null = document.head.querySelector(
    'meta[name="csrf-token"]'
  )
  return token?.content
}

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
axios.defaults.withCredentials = true

const token: string | undefined = getCSRFToken()

if (token) {
  axios.defaults.headers.common['X-CSRF-TOKEN'] = token
} else {
  console.error(
    'CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'
  )
}

// The following code adds an interceptor that renews the CSRF token whenever
// the app recieves a token mismatch error
const refreshCSRFToken = () => {
  return new Promise((resolve, reject): void => {
    console.log('Token expired, fetching a new one')
    axios
      .get('/')
      .then(({ data }) => {
        const wrapper = document.createElement('div')
        wrapper.innerHTML = data
        return wrapper
          .querySelector('meta[name=csrf-token]')
          ?.getAttribute('content')
      })
      .then((token) => {
        document
          .querySelector('meta[name=csrf-token]')
          ?.setAttribute('content', token || '')
        resolve()
      })
      .catch(() => reject())
  })
}

createAuthRefreshInterceptor(axios, refreshCSRFToken, {
  statusCodes: [419],
})

// Using a second interceptor to inject the newly fetched CSRF token to all requests
axios.interceptors.request.use((request) => {
  request.headers['X-CSRF-TOKEN'] = getCSRFToken()
  return request
})