您可以添加以下元标记
<meta name="csrf-token" content="{{ csrf_token() }}">
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>
1)这个错误来自哪里?
这个错误来自 resources/js/bootstrap.js
2)为什么会出现这个错误?
请看下面的片段,它试图查找名为csrf-token的meta标签,如果找到token,则将其添加为axios http库的headers。否则显示错误。
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 标签中:
<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
let token = document.head.querySelector('meta[name="csrf-token"]');
请尝试使用:
let token = document.querySelector('meta[name="csrf-token"]');
基本上,您的脚本无法读取带有csrf-token的元标记,在这种情况下,这应该可以解决问题。如果你在@section
后面加了一个分号,那么也可能会出现问题。像我的情况一样:
@endsection;
这将导致错误。当我将其更改为
@endsection
错误就消失了。
或者,您可以将URL直接传递到$except数组中,以从CSRF验证中排除该URL。
文件
app/Http/Middleware/VerifyCsrfToken.php
像这样
protected $except = [
"readPDF/*",
];
这个解决方案仅适用于需要从csrf验证中排除特定URL的情况,因此请小心使用。
bootstrap.js
文件中,将这一行 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');
}
这也解决了在Vue组件中有表单时的post-axios请求问题。