Отсутствует X-CSRF-TOKEN в заголовках Vue

Question

Я пытаюсь сделать POST с помощью VueJS 1.0.28, но я получаю ошибку 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, я не вижу, чтобы X-CSRF был включен для Vue.

Это супер базовый материал для jQuery, и я нахожусь в тупике, что я неправильно сконфигурировал на стороне Vue. Идеи?

Answer 1

Как выясняется, как Vue и JQuery получали маркер, но пакет код, который я использую непосредственно с помощью XMLHttpRequest поэтому необходимо получить токен вручную:

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

Answer 2

1. Перейти к Vue 2. * если возможно.
2. Не смешивайте Vue и jQuery. Я обещаю, это облегчит вашу жизнь.
3. Для обработки использования AJAX, например. AXIOS
4. Если да, то у вас будет просто использовать: axiosDefaults.headers.common['X-CSRF-Token'] = csrfToken;