Как в laravel работает защита csrf при запросах(axios + vue.js)?

Question

[semki096]

Запутался. Вроде как из коробки должно работать. У меня форма отправляет данные с помощью axios + vue.js Но как при этом заставить работать защиту csrf? Я не пользуюсь сборщиками - но вот я вижу файл bootstrap.js и в нем какието пояснения, но я плохо понимаю что мне делать с этим.

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap-sass');
} catch (e) {}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

Comments

[Дмитрий Кузнецов]

Тоже интересует данный вопрос

Answer 1

[D3lphi]

Без сборщика тут не обойтись. Laravel mix используйте, если не желаете конфигурировать webpack самостоятельно.
Установите зависимости при помощи команды npm install. Затем попросту выполните npm run dev. Mix все сделает самостоятельно, он обработает все импорты и require, странспайлирует код из es6 в поддерживаемый браузерами js и соберёт все в один файл. Но этот код у вас уже собран и лежит в файле public/js/app.min.js.

Как в laravel работает защита csrf при запросах(axios + vue.js)?

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;

Вот эта строчка устанавливает заголовок, который axios будет добавлять к каждому запросу (значение токена вытаскивается из мета-тега). Laravel умеет использовать этот заголовок.

Comments

[semki096]

Спасибо большое теперь гораздо понятнее. А как мне посмотреть что делает эта

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.conten

строка?
Я смотрю в хроме - Request Header - без изменений после добавления этой строки. И вообще у меня нет никаких ошибок без этой строки - это странно, ведь если я отправляю пост-запрос без защиты мне должна приходить ошибка?.