Vue + Laravel Sanctum CSRF Token 不匹配 419 错误。

Question

我遇到了一个“419（未知状态）”错误，错误信息为“CSRF令牌不匹配”。 POST http://127.0.0.1:8000/login 419 (unknown status) CSRF令牌不匹配。 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;
    //...
}

config/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 }
    }
};

- Ryo ID

---

只是给未来的我一个提示，确保你的 .env 文件中的 SESSION_DRIVER 设置为 cookie。 - undefined

Answer 1

我曾经也遇到了同样的问题。经过多次搜索，我最终来到了这个页面。看到了一些可能的建议解决方案后，我做出了改变。

SANCTUM_STATEFUL_DOMAINS=localhost:8080

到

SANCTUM_STATEFUL_DOMAINS=http://localhost:8080

就是这样！它很好地发挥作用了！！

- Aluefua Ehiabhi

---

弄清楚造成这个问题的原因花费了太长时间。 - Meisam Mulla

我...我...简直不敢相信！它解决了我三个多小时的问题！他们难道不认为以可见的方式记录这种行为很重要吗？因为示例代码恰恰指向相反的方向。 - E. Zacarias

我对此感到困惑，我找到的所有文档都指出协议不应包含在内。如果我在我的Laravel实例中添加它，它可以工作，但并不完全... - kendepelchin

我想给你一百万个赞。 - kodeart

感谢@Aluefua Ehiabhi，我花了几个小时尝试让它工作，直到看到你的答案。这绝对是Laravel文档中的另一个错误或失败。 - jgarcias

Answer 2

你的SANCTUM_STATEFUL_DOMAINS设置为localhost:8080，但其余代码显示你在8000端口上运行，如果你将其更改为8000，就应该可以了。

- L00_Cyph3r