title: SPA Vue on Laravel post method not allowed. Setting csrf token?
body: <p>I know this question is everywhere. But most of them are using blade and the rest of them have not being useful. I have tried in many ways to set this csrf-token but is not working.
  I'm trying to make an SPA with laravel API and the vuejs included in laravel 8. No matter what I keep getting &quot;The POST method is not supported for this route. Supported methods: GET, HEAD.&quot;</p>
  <p>This is my route on the route.api file is:</p>
  <pre><code>Route::post('api/authenticate', [LoginController::class, 'authenticate']);
  </code></pre>
  <p>I'm including a UsersService.js file where I'm planning to define all the api calls in functions in order to call them from the necessary components. So I have here the axios call.</p>
  <pre><code>import axios from 'axios'
  export default {
    authenticate (formData) {
      return axios.post('api/authenticate', { formData })
    }
  }
  </code></pre>
  <p>The only thing I have clear is that I need the token and in order to be sure that is there I have added a script on the layout blade file where I load my components like this. So I can access the token with AppSettings.csrfToken</p>
  <pre><code>&lt;script&gt;
    window.AppSettings = {
      csrfToken: &quot;{{ csrf_token() }}&quot;
    }
  &lt;/script&gt;
  </code></pre>
  <p>And this is my component</p>
  <pre><code>&lt;template&gt;
      &lt;div class=&quot;text-center&quot;&gt;
          &lt;div class=&quot;form-signin&quot; style=&quot;width: 100%; max-width: 330px; padding: 15px; margin: 0 auto;&quot;&gt;
                  &lt;h1 class=&quot;h3 mb-3 font-weight-normal&quot;&gt;Please sign in&lt;/h1&gt;
                  &lt;label for=&quot;inputEmail&quot; class=&quot;sr-only&quot;&gt;Email address&lt;/label&gt;
                  &lt;input type=&quot;email&quot; id=&quot;inputEmail&quot; class=&quot;form-control&quot; placeholder=&quot;Email address&quot; required=&quot;&quot; autofocus=&quot;&quot; v-model=&quot;formData.email&quot;&gt;
                  &lt;label for=&quot;inputPassword&quot; class=&quot;sr-only&quot;&gt;Password&lt;/label&gt;
                  &lt;input type=&quot;password&quot; id=&quot;inputPassword&quot; class=&quot;form-control&quot; placeholder=&quot;Password&quot; required=&quot;&quot; v-model=&quot;formData.password&quot;&gt;
                  &lt;div class=&quot;checkbox mb-3&quot;&gt;
                      &lt;label&gt;
                      &lt;input type=&quot;checkbox&quot; value=&quot;remember-me&quot;&gt; Remember me
                      &lt;/label&gt;
                  &lt;/div&gt;
                  &lt;button class=&quot;btn btn-lg btn-primary btn-block&quot; @click=&quot;login&quot;&gt;Sign in&lt;/button&gt;
                  &lt;p class=&quot;mt-5 mb-3 text-muted&quot;&gt;© 2017-2018&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      import UsersService from '../../services/UsersService.js'
      export default {
          data(){
            return{
                  formData: {
                      email: '',
                      password: '',
                      deviceName: 'browser',
                      _token: AppSettings.csrfToken
                  }
              }
          },
          async created () {
          },
         methods:{
             async login(){
                  const res = await UsersService.authenticate(this.formData)
                  console.log(res)
             },
          }
      }
  &lt;/script&gt;
  </code></pre>
  <p>cors.php</p>
  <pre><code>&lt;?php
  
  return [
  
      /*
      |--------------------------------------------------------------------------
      | Cross-Origin Resource Sharing (CORS) Configuration
      |--------------------------------------------------------------------------
      |
      | Here you may configure your settings for cross-origin resource sharing
      | or &quot;CORS&quot;. This determines what cross-origin operations may execute
      | in web browsers. You are free to adjust these settings as needed.
      |
      | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
      |
      */
  
      '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>I have the token, right there, I can read it, what should I do with it, in which way must be set on the axios in order to allow this POST request.</p>
  <p>Following the sanctum guid in laravel's website I have also added axios.defaults.withCredentials = true; but it does nothing.
  Also like this answer <a href="https://stackoverflow.com/questions/41817303/csrf-token-using-spa">CSRF token using SPA</a></p>
  <p>return axios.post('api/authenticate', { formData, _token: AppSettings.csrfToken })</p>
  <p>But that also didn't work, for sure I'm not understanding something or I'm looking in the wrong place. I've ran out of ideas, any help here?</p>