Vue + Laravel sanctum CSRF 令牌不匹配 419 错误

Posted

技术标签:

【中文标题】Vue + Laravel sanctum CSRF 令牌不匹配 419 错误【英文标题】:Vue + Laravel sanctum CSRF token mismatch 419 error 【发布时间】:2021-10-22 19:55:18 【问题描述】:

我收到“419(未知状态)”错误消息“CSRF 令牌不匹配”。

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

CSRF token mismatch.

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

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

app/Http/Kernel.php

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

app/Models/User.php

<?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;
    //...


配置/cors.php

<?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,
];

.env

SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:8080

src/main.js

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

    return config
)

src/views/auth/Login.vue

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 
    
;

【问题讨论】:

【参考方案1】:

您将 SANCTUM_STATEFUL_DOMAINS 设置为 localhost:8080,但其余代码显示您在端口 8000 而不是 8080 上运行。如果您将其更改为 8000,您应该是金色的。

【讨论】:

【参考方案2】:

我很难处理同样的问题。经过几次搜索,我登陆了这个页面。看到可能的建议解决方案后,我改变了

SANCTUM_STATEFUL_DOMAINS=localhost:8080

SANCTUM_STATEFUL_DOMAINS=http://localhost:8080

就是这样!效果很好!!

【讨论】:

以上是关于Vue + Laravel sanctum CSRF 令牌不匹配 419 错误的主要内容,如果未能解决你的问题,请参考以下文章

Vue + Laravel sanctum CSRF 令牌不匹配 419 错误

使用 laravel sanctum 在 vue 中保存令牌的最佳方法

Laravel Sanctum/Vuex 未捕获错误 Vue Router Navigation Guard

为啥我的 CSRF 令牌与 Laravel 和 Sanctum 不匹配?

Laravel Sanctum 无法使用 Postman 登录

如何使用 CSRF 令牌测试 Laravel / Sanctum 端点