Laravel + Vue.js(AXOS)-CSRF令牌不匹配 [英] Laravel + Vue.js (axios) - CSRF token mismatch

问题描述

我在Laravel中使用csrf令牌有问题.有时，请求POST(通过axios)返回 419 代码"CSRF令牌不匹配"，但是请求标头包含CSRF和XSRF令牌.有趣的是，它不是在隐身模式下发生的.

I have problem with csrf token in Laravel. Sometimes request POST (via axios) returns 419 code "CSRF token mismatch" but request header contain CSRF and XSRF tokens. Interestingly, it's not happend in incognito mode.

App.blade:

App.blade:

<meta name="csrf-token" content="{{ csrf_token() }}">

bootstrap.js:

bootstrap.js:

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';


let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Kernel.php:

Kernel.php:

    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \App\Http\Middleware\Localization::class,
        ],

我试图清除缓存和配置，但没有结果.有任何解决方法的想法吗?

I tried to clear cache and config with no results. Any ideas how to fix it?

推荐答案

有时?听起来像是过期的令牌.

在隐身标签页中工作时，您会得到一个新鲜的令牌.

When you're working in incognito tabs, you have a fresh token.

当您收到 419错误代码并且一切顺利时，请尝试 location.reload().

Try location.reload() when you're getting 419 error code and everything goes well.

这篇关于Laravel + Vue.js(AXOS)-CSRF令牌不匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！