VueJS / Laravel - vue-resource всегда дает статус 419 по запросу

Question

Я пытаюсь запустить мой пост-запрос в vue.

Я использую vue-resource для отправки / получения запросов.Метод Get работает.Пост нет.

Я использовал vue-resource "get" для разбивки на страницы в моей программе laravel, и она отлично работала.

Теперь мне нужно передать некоторые данные по почте на мой сервер, но это не такэто действительно работает.

Мои app.js:

// require('./bootstrap');
window.Vue = require('vue');

import VueResource from 'vue-resource';

Vue.use(VueResource);

Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('prices', require('./components/prices.vue'));

const app = new Vue({
    el: '#app'
});

Важная часть моего компонента, где я пытаюсь выполнить запрос на публикацию:

saveSellAndBuy: function () {
                Vue.http.post('/dashboard/savePricingData', {
                    buyAP: this.buyAP,
                    sellAP: this.sellAP,
                    tradeID: this.currentEditedKey
                }).then(function (data) {
                    console.log(data);
                });
            }

Что я получаю:

app.js:13790 POST http://unicorn.com/dashboard/savePricingData 419 (unknown status)

Некоторые исключения из laravel без сообщений

exception: "Symfony\Component\HttpKernel\Exception\HttpException"
file: "/var/www/unicorn.de/htdocs/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php"
line: 203
message: ""

И да .. Понятия не имею.Другие люди с такой же или связанной проблемой сказали, что мне нужно это в моей голове:

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

и это в конце (это делается после экземпляра vue)

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

КонечноУ меня были те в правильном месте.Я также попытался поставить вот этот фрагмент:

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('content');

В конце моего файла app.js, и у меня это не сработало.Если я добавлю этот код поверх приложения const, а не в конце, весь мой vueJS больше не будет работать.

И вот картинка, которая показывает, что у меня есть правильные куки, такие как XHR

---

Хорошо, я нашел способ.Я не думал, что это сработает.В Laravel VerifyCsrfToken.php есть:

protected $ кроме = ['/ dashboard / saveTradingData'];

, куда я могу добавить URI, которые должны быть исключены из проверки CSRF.

Но мне не очень нравится это решение ..

Answer 1

Вы можете установить заголовки любых запросов на vue-resource, используя interceptors:

Vue.http.interceptors.push((request, next) => {
  const token = document.querySelector('#token').getAttribute('content')

  if (token) {
    request.headers.set('X-CSRF-TOKEN', token)
  }

  next()
})