POST http://localhost:8000/login 419 (unknown status) laravel+sanctum+vuejs

Viewed 484

My Vuejs app doesn't set cookie headers.I am running my laravel app on port 8000 and my vuejs app on port 8080 and I use fortify for authentication. My vuejs app is not in same directory as my laravel app Also in Network tab of chrome this error appears this attempt to set a cookie was blocked because samesite=lax. These are my configurations. .env

SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=http://localhost:8080

cors.php

'paths' => ['api/*', '/sanctum/csrf-cookie','/login','/register'],    
    'allowed_methods' => ['*'],    
    'allowed_origins' => ['*'],    
    'allowed_origins_patterns' => [],    
    'allowed_headers' => ['*'],    
    'exposed_headers' => [],    
    'max_age' => 0,    
    'supports_credentials' => true,

Kernel.php

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

Vue js

I am new to Vue and I know this isn't the best way to use axios but for now i am just trying to be able to login.

async login() {
      try {
        this.token = await axios.get("//localhost:8000/sanctum/csrf-cookie",{
            headers: {
                Accept: "application/json",
            },
            withCredentials: true,
        });
        this.result = await axios.post(
          "//localhost:8000/login",
          { email: this.email, password: this.password },
          {
            headers: {
              Accept: "application/json",
            },
            withCredentials: true,
          }
        );

      } catch (error) {
        console.log(error);
      }
    },
  }

For two days I have read every post on stackoverflow regarding this issue but I still haven't been able to solve it.

0 Answers
Related