Vue headers 中缺少 X-CSRF-TOKEN

Question

我正在尝试使用 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')
    }
});

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

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

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

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

Answer 1

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

Answer 2

事实证明，Vue 和 jQuery 都获得了令牌，但我使用的包代码直接使用 XMLHttpRequest 所以它需要通过以下方式手动获取令牌：

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

Vue headers 中缺少 X-CSRF-TOKEN

Missing X-CSRF-TOKEN in Vue headers

ajax

csrf

vue.js

laravel-5