logo标签列表

如何在控制台上修复CSRF令牌未找到的问题

laravel
34

如何解决Laravel 5.4中的CSRF令牌未找到问题，我尝试在Laravel中学习Vue.js，但我的控制台出现错误"未找到CSRF令牌"，请帮助我解决此错误。

enter image description here

1
你应该粘贴错误日志或更详细地阐述问题所在。但一定要发布错误或代码。你发布的错误越多，你将得到更好的反馈。 - miguelsolano
2
如果在实际头部之前发生了dump($someVar)，这种情况也会发生。 - Rav
7个回答
108

您可以添加以下元标记

<meta name="csrf-token" content="{{ csrf_token() }}">
正是我所需要的。谢谢。 - mtchuente
8
如果您正在使用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>
7

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

将生成如图所示的令牌：

enter image description here

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

谢谢你详细的回答，兄弟！有时候解释问题和解决方案比仅仅留下一行代码更好，即使它可以解决问题。 - SMPLYJR
4
如果您正在使用： let token = document.head.querySelector('meta[name="csrf-token"]'); 请尝试使用： let token = document.querySelector('meta[name="csrf-token"]'); 基本上，您的脚本无法读取带有csrf-token的元标记，在这种情况下，这应该可以解决问题。
我不明白为什么这样解决了问题，但它确实解决了。谢谢。 - mwallisch
这也解决了我的问题，为什么会这样？因为<meta>标签位于<head>中。 - Miguel Stevens
0

如果你在@section后面加了一个分号，那么也可能会出现问题。像我的情况一样：

@endsection;

这将导致错误。当我将其更改为

@endsection

错误就消失了。

0

或者，您可以将URL直接传递到$except数组中，以从CSRF验证中排除该URL。

文件

app/Http/Middleware/VerifyCsrfToken.php

像这样

 protected $except = [
        "readPDF/*",
    ];

这个解决方案仅适用于需要从csrf验证中排除特定URL的情况，因此请小心使用。

-2
在你的 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请求问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接