title: Laravel csrf token mismatch for axios post request
body: <p>I am have been very desperate for these few days because I seem can't overcome this one simple problem.</p>
  <p>I can not authenticate my SPA (react via Axios) powered by Sanctum Laravel</p>
  <p>I have read the documentation and read man tutorials and questions. Some problems have I overcome.</p>
  <p>Eventually, I stuck in this one :</p>
  <p>My request has contained the X-CSRF-TOKEN, but it always returns a 419 &quot;message: CSRF token mismatch.&quot;</p>
  <p><a href="https://i.stack.imgur.com/acKKJ.png" rel="nofollow noreferrer">Here is my error details:</a></p>
  <p>Here is my cors.php</p>
  <pre><code>    &lt;?php
  
  return [
  
      'paths' =&gt; ['api/*', 'sanctum/csrf-cookie'],
  
      'allowed_methods' =&gt; ['*'],
  
      'allowed_origins' =&gt; ['*'],
  
  'allowed_origins_patterns' =&gt; [],
  
  'allowed_headers' =&gt; ['*'],
  
  'exposed_headers' =&gt; [],
  
  'max_age' =&gt; 0,
  
  'supports_credentials' =&gt; true,
  </code></pre>
  <p>];</p>
  <p>Here is App.js from react app</p>
  <pre><code>    import logo from './logo.svg';
  import './App.css';
  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
  import Login from './components/auth/login';
  import Register from './components/auth/register';
  
  import axios from 'axios';
  
  axios.defaults.baseURL = 'http://127.0.0.1:8000/';
  axios.defaults.headers.post['Content-Type'] = 'application/json';
  axios.defaults.headers.post['Accept'] = 'application/json';
  axios.defaults.withCredentials = true;
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Router&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/&quot; element={&lt;Login /&gt;} /&gt;
            &lt;Route path=&quot;/login&quot; element={&lt;Login /&gt;} /&gt;
            &lt;Route path='/register' element={&lt;Register /&gt;}&gt;&lt;/Route&gt;
          &lt;/Routes&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Here is the register.js</p>
  <pre><code>    import React, { useState } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  
  import '../../css/login2.css'
  import '../../css/login3.css'
  
  function Register() {
  
      const [register, setRegister] = useState({
          email: '',
          password: '',
          confirmPassword: ''
      });
  
      const handleInput = (e) =&gt; {
          e.persist();
          setRegister({
              ...register,
              [e.target.name]: e.target.value
          })
      }
  
      const submit = (e) =&gt; {
          e.preventDefault();
          const data = {
              email: register.email,
              password: register.password,
              confirmPassword: register.confirmPassword
          }
          axios.get('/sanctum/csrf-cookie').then(response =&gt; {
              console.log(response);
              axios.post('/api/register', data).then(res =&gt; {
                  console.log(&quot;res: &quot;+res);
              }).catch(err =&gt; {
                  console.log(&quot;err&quot;+err);
              })
          })
      }
  
      return (
          &lt;section className=&quot;section-register d-flex justify-content-center align-items-center&quot;&gt;
              &lt;div className=&quot;box&quot; style={{ width: &quot;20rem&quot;, }}&gt;
                  &lt;h3 className=&quot;text-center font-weight-bold mb-4&quot;&gt;Register&lt;/h3&gt;
                  &lt;form onSubmit={submit}&gt;
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input type=&quot;email&quot; onChange={handleInput} className=&quot;form-control&quot; placeholder=&quot;Email Address&quot;
                              name=&quot;email&quot; /&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input type=&quot;password&quot; onChange={handleInput} className=&quot;form-control&quot;
                              placeholder=&quot;Password&quot; name=&quot;password&quot; /&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;input type=&quot;password&quot; onChange={handleInput} className=&quot;form-control&quot;
                              placeholder=&quot;Confirm Password&quot; name=&quot;password_confirmation&quot; /&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;form-group&quot;&gt;
                          &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary btn-block btn-rounded&quot;&gt;Continue&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
                  &lt;div className=&quot;or mt-4 mb-4&quot;&gt;
                      &lt;span className=&quot;&quot;&gt;OR&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;text-center&quot;&gt;
                      &lt;a href=&quot;/login&quot; className=&quot;btn btn-outline-primary btn-rounded clever&quot;
                          style={{ textDecoration: &quot;none !important&quot;, }}&gt;Login&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
      );
  }
  
  export default Register;
  </code></pre>