title: Laravel 7 Vue 2 Sanctum Login Error 419; CSRF Token Mismatch
body: <p>I am using Laravel with default integration of Vue (Not separate project using Vue CLI). I'm trying to authenticate a user but it always shows 419 error. I have included the csrf token to the Axios's header but it still provides mismatch error.</p>
  <h1>bootstrap.js</h1>
  <pre><code>window.axios = require('axios');
  
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  window.axios.defaults.withCredentials = true;
  window.axios.defaults.baseURL = &quot;http://localhost:8000/&quot;;
  window.axios.defaults.headers.common['X-CSRF-TOKEN'] = $('meta[name=&quot;csrf-token&quot;]').attr('content');
  </code></pre>
  <h1>Kernel.php</h1>
  <pre><code>'api' =&gt; [
      EnsureFrontendRequestsAreStateful::class,
      'throttle:60,1',
      \Illuminate\Routing\Middleware\SubstituteBindings::class,
  ]
  </code></pre>
  <h1>cors.php</h1>
  <pre><code>'paths' =&gt; [
      'api/*',
      '/login',
      '/logout',
      '/sanctum/csrf-cookie'
  ],
  .
  .
  .
  'supports_credentials' =&gt; true,
  </code></pre>
  <h1>web.php</h1>
  <pre><code>Route::get('/{any?}', function() {
      return view('welcome');
  });
  
  Route::post('/login', 'AuthController@login');
  Route::post('/logout', 'AuthController@logout');
  </code></pre>
  <h1>LoginModal.vue</h1>
  <pre><code>&lt;template&gt;
      &lt;form @submit.prevent=&quot;submit&quot; method=&quot;POST&quot;&gt;
          &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Email&quot; v-model=&quot;email&quot; /&gt;
          &lt;input
              type=&quot;password&quot;
              class=&quot;form-control&quot;
              placeholder=&quot;Password&quot;
              v-model=&quot;password&quot;
          /&gt;
  
          &lt;button&gt;SIGN IN&lt;/button&gt;
      &lt;/form&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapActions } from 'vuex'
  
  export default {
      data() {
          return {
              email: '',
              password: '',
          }
      },
      methods: {
          ...mapActions('user', ['login']),
          async submit() {
              await this.login({
                  email: this.email,
                  password: this.password,
              })
  
              this.$router.replace({ name: 'Topic' })
          },
      },
  }
  &lt;/script&gt;
  </code></pre>
  <h1>user.js | Vuex modules</h1>
  <pre><code>async login({ dispatch }, credentials) {
      await axios.get('/sanctum/csrf-cookie')
      await axios.post('/login', credentials)
  
      return dispatch('me')
  },
  </code></pre>
  <p>I am configuring my project similar to this <a href="https://blog.codecourse.com/setting-up-laravel-sanctum-airlock-for-spa-authentication-with-vue/" rel="noreferrer">article</a>. His is a separate project while mine within the Laravel project. I've also refer to Laravel's sanctum documentation on configuring authentication and it still didn't work. Review a lot of StackOverflow Q&amp;A and no luck thus far. Most are talking about adding CSRF headers to Axios which I've done already within  <code>bootstrap.js</code>. I did try including a hidden input to hold the CSRf and still no luck.</p>