Vue 标头中缺少 X-CSRF-TOKEN答案

【问题标题】：Missing X-CSRF-TOKEN in Vue headersVue 标头中缺少 X-CSRF-TOKEN
【发布时间】：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 方面的错误配置感到困惑。想法？

【问题讨论】：

标签： ajax laravel-5 vue.js csrf

【解决方案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);

【讨论】：