title: Laravel + Vue.js (axios) - CSRF token mismatch
body: <p>I have problem with csrf token in Laravel. Sometimes request POST (via axios) returns <strong>419</strong> code "CSRF token mismatch" but request header contain CSRF and XSRF tokens. Interestingly, it's not happend in incognito mode.</p>
  
  <p><a href="https://i.stack.imgur.com/dyvwy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dyvwy.png" alt="enter image description here"></a></p>
  
  <p>App.blade:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;meta name="csrf-token" content="{{ csrf_token() }}"&gt;
  </code></pre>
  
  <p>bootstrap.js:</p>
  
  <pre class="lang-js prettyprint-override"><code>window.axios = require('axios');
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  
  
  let token = document.head.querySelector('meta[name="csrf-token"]');
  
  if (token) {
      window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
      console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
  }
  </code></pre>
  
  <p>Kernel.php:</p>
  
  <pre class="lang-php prettyprint-override"><code>    protected $middlewareGroups = [
          'web' =&gt; [
              \App\Http\Middleware\EncryptCookies::class,
              \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
              \Illuminate\Session\Middleware\StartSession::class,
              \Illuminate\Session\Middleware\AuthenticateSession::class,
              \Illuminate\View\Middleware\ShareErrorsFromSession::class,
              \App\Http\Middleware\VerifyCsrfToken::class,
              \Illuminate\Routing\Middleware\SubstituteBindings::class,
              \App\Http\Middleware\Localization::class,
          ],
  </code></pre>
  
  <p>I tried to clear cache and config with no results. Any ideas how to fix it?</p>