Enable CSRF on Nuxt/Axios for Rails APIs

plugins-axios.js

export default function ({ $axios }) {
  // Because API is always considered as a cross-domain call, the default
  // XSRF feature available on axios will not work for us, because they use
  // cookies and cookies aren't readable in cross-domains. Instead we must
  // rely on having CSRF sent on every header request by the backend, and
  // then we store that value to send on the next subsequent request.
  //
  // See: https://github.com/axios/axios#interceptors
  $axios.interceptors.request.use((config) => {
    if (!config.method.includes('get', 'head', 'options')) {
      config.headers['X-CSRF-Token'] = globalThis.XSRF_TOKEN
    }

    return config
  })

  $axios.interceptors.response.use((response) => {
    globalThis.XSRF_TOKEN = response.headers['x-csrf-token']
    return response
  })
}