Laravel Sanctum with Angular - CSRF token mismatch

Issue

I have got an Angular Frontend and an Laravel Backend with Sanctum.

My Login Component looks like this. When I run it without the Login-Request, everything works and both cookies are done. When I insert the login request, I always got an 419 (unknown status) with the message CSRF token mismatch.

I tried a bunch of ideas out of other threads (http://localhost, localhost, ip-number, with ports, without ports), but unfortunately nothing work.

In advance, thanks for your help :)

Angular Component:

import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import axios from 'axios';

axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://localhost:8000'

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [CommonModule, RouterLink],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss'
})
export class LoginComponent {

  login(){
    console.log('test');
     
    axios.get('/sanctum/csrf-cookie').then(response => {
      axios.post('/login', {
        email: 'test@test.de',
        password: 'password'
      }) 
      .then(response => {
        console.log(response);
      })
      .catch(error => {
        console.log(error.response)
      })
  });
  }

}

Laravel .env

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost,localhost:4200,localhost:3000,localhost:8000,127.0.0.1,127.0.0.1:8000,::1

Laravel cors.php

'paths' => ['api/*', 'sanctum/csrf-cookie', 'login', 'logout'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

Laravel sanctum.php

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:4200,localhost:3000,127.0.0.1,127.0.0.1:8000,::1',
        Sanctum::currentApplicationUrlWithPort()
    ))),

Laravel session.php

'domain' => env('SESSION_DOMAIN'),

Laravel kernel.php

protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            \Illuminate\Routing\Middleware\ThrottleRequests::class . ':api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

Solution

I found the mistake. I forgot this one in the component.

axios.defaults.withXSRFToken = true;

Answered By - Philipp