Vue 标头中缺少 X-CSRF-TOKEN

Posted 2023-02-22

【中文标题】Vue 标头中缺少 X-CSRF-TOKEN

【英文标题】：Missing X-CSRF-TOKEN in Vue headers

【发布时间】：2017-05-14 03:30:51

【问题描述】：

我正在尝试使用 VueJS 1.0.28 进行 POST，但出现 Laravel 5.3 TokenMismatchException 错误。

这是在app.js 中涵盖 jQuery 和 Vue：

Vue.http.interceptors.push((request, next) => 
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
);

$.ajaxSetup(
    headers: 
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    
);

这是在 main.blade.php 布局中，我们在其中实例化 Laravel 值：

<script src="!! asset('/js/app.js') !!"></script>
<script>
    (function () 
        window.Laravel = 
            csrfToken: ' csrf_token() '
        ;
    )();
</script>

当我查看 POST 请求中的标头时，我没有看到 Vue 包含的 X-CSRF。

这是 jQuery 的超级基本内容，我对我在 Vue 方面的错误配置感到困惑。想法？

【参考方案1】：

如果可能，请移至 Vue 2.*。 不要混合使用 Vue 和 jQuery。我保证，它会让您的生活更轻松。 用于处理 AJAX 使用例如AXios 如果是这样，您只需使用：axiosDefaults.headers.common['X-CSRF-Token'] = csrfToken;

【讨论】：

#1 现在不是一个选项。 #2 由于依赖关系而对项目的要求。 #3 我会研究它，但无法控制各种包使用哪个库。

【参考方案2】：

事实证明，Vue 和 jQuery 都在获取令牌，但我使用的包代码直接使用 XMLHttpRequest，因此需要手动获取令牌：

xhr.setRequestHeader('X-CSRF-TOKEN', Laravel.csrfToken);