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 不匹配?