如何修复控制台上找不到的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() }}">

它将生成令牌，如图像所示：

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

Answer 4

如果您正在使用

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

尝试使用

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

基本上，您的脚本无法读取带有csrf令牌的元标记，在这种情况下，该脚本应该可以工作。

Answer 5

如果您用分号结尾的@section也是一个问题。就像我在做什么一样

@endsection;

引起错误的原因。当我将其更改为

@endsection

错误消失了。

Answer 6

否则，您只需在 $ except 数组中传递URl，即可从CSRF验证中排除该URL。

文件

app/Http/Middleware/VerifyCsrfToken.php

赞

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

此解决方案仅在需要从csrf验证中排除特定URL的情况下适用，请谨慎使用。

Answer 7

当您在bootstrap.js文件中使用JavaScript时，您会发现以下行

courses

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

当您在vue组件中有表单时，这也解决了轴后请求。