title: Axios not sending XSRF token with headers
body: <p>I am integrating a Vue JS (Quasar framework) based SPA with API. The API is built in Laravel and is using sanctum for CSRF.</p>
  <p>When I send a request to the sanctum endpoint <code>https://someweburl.com/sanctum/csrf-cookie</code> it sends the XSRF-TOKEN as cookie correctly. But when I am sending the the POST request, the X-XSRF-TOKEN is not attaching itself with the header. And I am getting a 'token mismatch' error.</p>
  <p>The front-end is on my localhost:8080 while the API is live on a url. I do not have direct access to the Laravel project but only the API.</p>
  <p>Following is my axios configuration</p>
  <pre><code>import Vue from 'vue';
  import axios from 'axios';
  
  Vue.prototype.$axios = axios;
  
  const apiBaseUrl = &quot;https://someweburl.com&quot;;
  const api = axios.create({ baseURL: apiBaseUrl });
  
  api.defaults.withCredentials = true;
  
  Vue.prototype.$api = api;
  Vue.prototype.$apiBaseURL = apiBaseUrl;
  
  
  export { axios, api, apiBaseUrl }
  </code></pre>
  <p>Following is the request format that I am trying to achieve i.e A POST request after getting the CSRF</p>
  <pre><code>export const fetchAllEvents = async function (context, payload) {
      this._vm.$api.get('/sanctum/csrf-cookie').then(response =&gt; {
          this._vm.$api.post('/api/website/event/all').then(response =&gt; {
              context.commit('setAllEvents', response.data.data);
          }).catch(error =&gt; {
              console.log(error);
          })
      }).catch(error =&gt; {
          console.log(error);
      })
  }
  </code></pre>
  <p>When I check use Postman to make the POST request with X-XSRF-TOKEN added as header, i am getting the correct response. Which means the API is working correctly. But there's some issue with axios.</p>
  <p>Any help will be appreciated.</p>