I tried building a Laravel 8 application with default integration of Vue (Not separate project using Vue CLI). I use Sanctum for authentication. I followed the setup in the documentation but I got an error 419 (CSRF token mismatch). I also used laravel/ui to setup the authentication.
bootstrap.js
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.withCredentials = true;
window.axios.defaults.baseURL = "http://localhost:8000/";
Kernel.php
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:60,1',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
]
cors.php
'paths' => [
'api/*',
'/login',
'/logout',
'/sanctum/csrf-cookie'
],
.
.
.
'supports_credentials' => true,
web.php
Route::get('/{any?}', [AppController::class, "index"]);
Auth::routes();
App.vue
...
methods: {
login() {
axios.get("/sanctum/csrf-cookie").then(response => {
axios.post("/login", {
email: "[email protected]",
password: "password"
})
})
}
},
...
.env
SESSION_DRIVER=file
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost,127.0.0.1,localhost:8000,127.0.0.1:8000
