как исправить токен CSRF, не найденный на консоли

Ответ 1

Вы можете добавить следующий метатег

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

Ответ 2

Если вы используете Vue, вот путь:

Vue.http.interceptors.push(function (request, next) {
request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
next();
});

или же

<script>
window.Laravel = <?php echo json_encode([
    'csrfToken' => csrf_token(),
]); ?>
</script>

Ответ 3

  1) Откуда появилась эта ошибка?

Эта ошибка произошла из resources/js/bootstrap.js

2) Почему произошла эта ошибка?

см. ниже фрагмент, попытайтесь найти метатег имени csrf-token,  если токен найден, добавьте в качестве заголовков в axios http library.else show error

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');
}

3) Что такое решение?

Промежуточное ПО VerifyCsrfToken проверит заголовок запроса X-CSRF-TOKEN.

Вы можете сохранить токен в метатеге HTML:

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

Он сгенерирует токен, как показано на рисунке:

Для запроса Ajax:

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

Для VueJS 2.0:

Vue.http.headers.common['X-CSRF-TOKEN'] = document.head.querySelector('meta[name="csrf-token"]').content;

узнать больше о токене CSRF: https://laravel.com/docs/5.8/csrf

Ответ 4

если вы используете

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

попробуйте использовать

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

По сути, ваш скрипт не может прочитать метатег с помощью csrf-токена, в этом случае это должно сработать.

Ответ 5

Когда вы используете JavaScript в вашем файле bootstrap.js, вы найдете эти строки

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');
}

Заменить document.head.querySelector('meta[name="csrf-token"]'); на $('meta[name="csrf-token"]').attr('content');

Было бы

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

Это также решает запросы post-axios, когда у вас есть формы в компоненте vue.