如何修复控制台上找不到的CSRF令牌

Question

如何修复在laravel 5.4上找不到的CSRF令牌,我尝试在laravel中学习vue js但是我的控制台中有错误"找不到CSRF令牌",请帮我解决这个错误.

Answer 1

您可以添加以下元标记

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

Answer 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>

Answer 3

1）此错误来自何处？

此错误来自resources / js / bootstrap.js

2）为什么会发生此错误？

参见下面的代码片段，尝试查找名称为csrf-token的元标记，如果找到了标记，则将其作为标头添加到axios http库中。

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() }}">

它将生成令牌，如Image所示：

对于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