Laravel Vue.js (axios) - CSRF 令牌不匹配

Question

我在 Laravel 中遇到 csrf 令牌问题。有时请求 POST（通过 axios）返回 419 代码“CSRF 令牌不匹配”，但请求标头包含 CSRF 和 XSRF 令牌。有趣的是，它不会在隐身模式下发生。

应用程序刀片：

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

引导程序.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');
}

内核.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,
        ],

我试图清除缓存和配置但没有结果。任何想法如何解决它？

原文由 serpentow 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有时？！听起来像 expired token 。

当你在 incognito tabs 工作时，你有一个新的令牌。

尝试 location.reload() 当你得到 419 error code 一切顺利。

原文由 Khalil Laleh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我遇到了这个问题。原因是没有设置 axios 标头。在组件内的轴对象上设置它们也没有解决问题。在定义对象后设置标题为我解决了这个问题。

在您的刀片视图中添加以下内容：

 <script>window.Laravel = {csrfToken: '{{ csrf_token() }}'}</script>

在您的 bootstrap.js 文件中，在声明 window.axios = require('axios'); 之后添加以下内容：

 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;

原文由 Kevin Lynch 发布，翻译遵循 CC BY-SA 4.0 许可协议