laravel 如何修复在控制台上找不到的 CSRF 令牌
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45603815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to fix CSRF token not found on console
提问by tejoprabowo
How to fix CSRF token not found on laravel 5.4, i try to learn vue js in laravel but i have error in my console "CSRF token not found", help me how to fix this error.
如何修复在 Laravel 5.4 上找不到的 CSRF 令牌，我尝试在 Laravel 中学习 vue js，但我的控制台中出现错误“找不到 CSRF 令牌”，请帮助我如何解决此错误。
回答by user2644503
You can add the following meta tag
您可以添加以下元标记
<meta name="csrf-token" content="{{ csrf_token() }}">
回答by aofdev
If you are using Vue, here's the way to go:
如果您使用的是 Vue，则可以使用以下方法：
Vue.http.interceptors.push(function (request, next) {
request.headers['X-CSRF-TOKEN'] = Laravel.csrfToken;
next();
});
or
或者
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>
</script>
回答by Saurabh Mistry
1) Where this error come from ?
1）这个错误来自哪里？
This error come from resources/js/bootstrap.js
这个错误来自resources/js/bootstrap.js
2) Why this error occured ?
2）为什么会出现这个错误？
see below snippet , it is try to find out meta tag of name csrf-token , if token found then add as headers to axios http library.else show error
见下面的片段，它试图找出名称 csrf-token 的元标记，如果找到令牌，则将其作为标头添加到 axios http library.else 显示错误
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) What is the Solution ?
3）什么是解决方案？
VerifyCsrfTokenmiddleware will check for the X-CSRF-TOKENrequest header.
VerifyCsrfToken中间件将检查X-CSRF-TOKEN请求标头。
You could store the token in an HTML meta tag:
您可以将令牌存储在 HTML 元标记中：
<meta name="csrf-token" content="{{ csrf_token() }}">
It will generate token as shown in Image :
它将生成如图所示的令牌：
For Ajax Request :
对于 Ajax 请求：
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
For VueJS 2.0 :
对于 VueJS 2.0 ：
Vue.http.headers.common['X-CSRF-TOKEN'] = document.head.querySelector('meta[name="csrf-token"]').content;
read more about CSRF token : https://laravel.com/docs/5.8/csrf
阅读有关 CSRF 令牌的更多信息：https: //laravel.com/docs/5.8/csrf
回答by Sanket Sardesai
If you are using
如果您正在使用
let token = document.head.querySelector('meta[name="csrf-token"]');
let token = document.head.querySelector('meta[name="csrf-token"]');
Try using
尝试使用
let token = document.querySelector('meta[name="csrf-token"]');
let token = document.querySelector('meta[name="csrf-token"]');
Basically your script is unable to read meta tag with csrf-token, in that case, this should work.
基本上您的脚本无法使用 csrf-token 读取元标记，在这种情况下，这应该可以工作。
回答by bicycle
What could be a problem as well is if you're ending a @sectionwith a semicolumn. Like what happened with me I was doing
如果您@section以半列结尾，也可能出现问题。就像发生在我身上的事情一样
@endsection;
@endsection;
Which caused the error. When I changed it to
这导致了错误。当我把它改成
@endsection
@endsection
The error was gone.
错误消失了。
回答by Vladimir Salguero
In your bootstrap.jsfile replace this line document.head.querySelector('meta[name="csrf-token"]');by $('meta[name="csrf-token"]').attr('content');
在您的bootstrap.js文件中，将此行替换document.head.querySelector('meta[name="csrf-token"]');为$('meta[name="csrf-token"]').attr('content');
It would be
这将是
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');
}
This also solves the post-axios requests when you have forms in a vue component.
这也解决了 vue 组件中有表单时的 post-axios 请求。
