Vue + Laravel Sanctum encounters 419 error with CSRF token mismatch

Question

I received a "419 (Unknown Status)" error with the error message "CSRF token mismatch."

POST http://127.0.0.1:8000/login 419 (unknown status)

CSRF token does not match.

Laravel服务器：http://127.0.0.1:8000

Vue服务器：http://localhost:8080

应用程序/Http/Kernel.php

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

应用程序/模型/User.php

<code><?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
    //...
}

</code>

配置/cors.php

<code><?php

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

</code>

.env

SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:8080

src/main.js

<code>axios.interceptors.request.use((config) => {
    config.baseURL = 'http://127.0.0.1:8000'
    config.withCredentials = true

    return config
})
</code>

src/views/auth/Login.vue

<code>import axios from 'axios'
import { reactive } from '@vue/reactivity';

export default {
    setup() {

        const credential = reactive({
            email: '',
            password: '',
        })

        const login = async () => {
            axios.get('/sanctum/csrf-cookie').then( async () => {
                let response = await axios.post('/login', credential)
                console.log(response);
            });
        }

        return { login, credential }
    }
};
</code>

Answer 1

I'm having trouble with this same issue. After several searches I found this page. After seeing possible suggested solutions, I modified

SANCTUM_STATEFUL_DOMAINS=localhost:8080

for

SANCTUM_STATEFUL_DOMAINS=http://localhost:8080

Then it will be fine! It works fine! !

Answer 2

You set SANCTUM_STATEFUL_DOMAINS to localhost:8080, but the rest of the code shows you are using port 8000 instead of port 8080. If you change it to 8000 you should be fine.