laravel 7 csrf 令牌不匹配
Posted
技术标签:
【中文标题】laravel 7 csrf 令牌不匹配【英文标题】：laravel 7 csrf token mismatch 【发布时间】：2020-07-08 08:43:18 【问题描述】：我正在使用 laravel 7 和带有 ajax 登录和注册以及 bootstrap 4 模式窗口的默认身份验证。但是登录后重新发送验证链接并且注册时显示“CSRF令牌不匹配错误”，下面是我的代码：
#ajax setup#
$(function()
$.ajaxSetup(
headers:
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
);
);
//login with ajax
$(function()
$("#loginForm").on("submit", function(e)
e.preventDefault();
var form = $(this);
var url = form.attr("action");
var type = form.attr("method");
var data = new FormData(form[0]);
//console.log(data.response);
$.ajax(
url: url,
data: data,
type: type,
processData:false,
contentType: false,
success:function()
//reset form data
$( '#loginForm' ).each(function()
this.reset();
);
$('#login').modal('hide');
$(".top_header_area").load('/'+ ' .top_header_area');
//success message
toastr.success('Login Successfull <i class="fas fa-smile"></i>','Success',
closeButton: true,
progressBar: true
);
,
error:function(xhr,status,error)
//console.log(xhr.status);
//console.log(xhr.responseJSON.message);
if(xhr.status === 403)
$('#login').modal('hide');
//reload header panel
$(".top_header_area").load('/'+ ' .top_header_area');
$('#verify').modal('show');
toastr.error(xhr.responseJSON.message,'Error',
closeButton: true,
progressBar: true
);
errors = xhr.responseJSON.errors;
$.each(errors, function(key, value)
//shows error message
toastr.error(value,'Error',
closeButton: true,
progressBar: true
);
);
,
);
);
);
//Register with ajax
$(function()
$("#registerForm").on("submit", function(e)
e.preventDefault();
var form = $(this);
var url = form.attr("action");
var type = form.attr("method");
var data = new FormData(form[0]);
//console.log(data.response);
$.ajax(
url: url,
data: data,
type: type,
processData:false,
contentType: false,
success:function()
//reset form data
$( '#registerForm' ).each(function()
this.reset();
);
$('#register').modal('hide');
//success message
toastr.success('Registration Successfull <i class="fas fa-smile"></i>','Success',
closeButton: true,
progressBar: true
);
,
error:function(xhr,status,error)
if(xhr.status === 403)
$('#register').modal('hide');
//reload header panel
$(".top_header_area").load('/'+ ' .top_header_area');
$('#verify').modal('show');
toastr.error(xhr.responseJSON.message,'Error',
closeButton: true,
progressBar: true
);
errors = xhr.responseJSON.errors;
$.each(errors, function(key, value)
//shows error message
toastr.error(value,'Error',
closeButton: true,
progressBar: true
);
);
,
);
);
);
//request verification email
$(function()
$("#resendLink").on("submit", function(e)
e.preventDefault();
var form = $(this);
var url = form.attr("action");
var type = form.attr("method");
var data = new FormData(form[0]);
$.ajax(
url: url,
type: type,
data: data,
processData:false,
contentType: false,
success:function()
$(".top_header_area").load('/'+ ' .top_header_area');
//reset form data
$( '#resendLink' ).each(function()
this.reset();
);
$('#verify').modal('hide');
//success message
toastr.success('Verification Link Send <i class="fas fa-smile"></i>','Success',
closeButton: true,
progressBar: true
);
,
);
);
);
当我在浏览器中检查网络选项卡请求 Cookie 和响应 Cookie 值不同并且我使用登录、注册、重新发送验证链接时，所有表单都在同一个 app.blade.php 刀片布局中的模式中。 登录后点击“重新发送验证链接”按钮表单显示“csrf令牌不匹配”，但刷新页面后它可以工作！ 我正在从同一页面发送 2 个 ajax 请求.... 1.登录 2. 重新发送验证链接
但注册表发送了 1 个 ajax 请求但再次显示相同的错误。
表格如下：
<!-- Modal -->
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content wow fadeInUp" data-wow-delay=".3s">
<div class="modal-header">
<h5 class="modal-title" id="loginTitle"><i class="fas fa-sign-in-alt"></i> LOGIN</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body contact-form">
<form id="loginForm" action=" route('login') " method="post">
@csrf
<div class="form-group">
<input id="loginEmail" type="email" placeholder="Email Address" class="form-control @error('email') is-invalid @enderror" name="email" value=" old('email') " autocomplete="email" autofocus>
</div>
<div class="form-group">
<input id="LoginPassword" placeholder="Password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="current-password">
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox" name="remember" id="remember" old('remember') ? 'checked' : '' >
<label class="custom-control-label" for="remember">
__('Remember Me')
</label>
</div>
</div>
<button class="btn btn-lg btn-block text-uppercase button" type="submit"> __('Login') </button>
<hr>
@if (Route::has('password.request'))
<a class="btn btn-link link" href="#" data-dismiss="modal" data-toggle="modal" data-target="#reset">
__('Forgot Your Password?')
</a>
@endif
<hr class="my-4">
<p>Don't have account? <a href="#" class="link" data-dismiss="modal" data-toggle="modal" data-target="#register">Register</a></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- ****** Register modal Start ****** -->
<!-- Modal -->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="registerTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content wow fadeInUp" data-wow-delay=".3s">
<div class="modal-header">
<h5 class="modal-title" id="registerTitle"><i class="fas fa-user-plus"></i> REGISTER</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body contact-form">
<form id="registerForm" action=" route('register') " method="post">
@csrf
<div class="form-group">
<input id="name" type="text" placeholder="Name" class="form-control @error('name') is-invalid @enderror" name="name" value=" old('name') " autocomplete="name" autofocus>
</div>
<div class="form-group">
<input id="username" type="text" placeholder="Username" class="form-control @error('username') is-invalid @enderror" name="username" value=" old('username') " autocomplete="username" autofocus>
</div>
<div class="form-group">
<input id="registerEmail" type="text" placeholder="E-mail" class="form-control @error('email') is-invalid @enderror" name="email" value=" old('email') " autocomplete="email" autofocus>
</div>
<div class="form-group">
<input id="registerPassword" type="password" placeholder="Password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password">
</div>
<div class="form-group">
<input id="register-password-confirm" type="password" placeholder="Confirm Password" class="form-control" name="password_confirmation" autocomplete="new-password">
</div>
<button class="btn btn-lg btn-block text-uppercase button" type="submit"> __('Register') </button>
<hr class="my-4">
<p>Already REGISTERED<a href="#" class="link" data-dismiss="modal" data-toggle="modal" data-target="#login"> LOGIN</a></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- ****** Verify modal Start ****** -->
<!-- Modal -->
<div class="modal fade" id="verify" tabindex="-1" role="dialog" aria-labelledby="verifyTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content wow fadeInUp" data-wow-delay=".3s">
<div class="modal-header">
<h5 class="modal-title" id="verifyTitle"><i class="fas fa-certificate heading"></i> __('Verify Your Email Address') </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@if (session('resent'))
<div class="alert alert-success" role="alert">
__('A fresh verification link has been sent to your email address.')
</div>
@endif
__('Before proceeding, please check your email for a verification link.')
__('If you did not receive the email') ,
<!-- <a href="javascript:void(0);" onclick="resend()" class="btn btn-link p-0 m-0 align-baseline link"> __('click here to request another') </a> -->
<form id="resendLink" class="d-inline" method="POST" action=" route('verification.resend') ">
@csrf
<button type="submit" class="btn btn-link p-0 m-0 align-baseline"> __('click here to request another') </button>.
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
【问题讨论】：
【参考方案1】：要解决此问题，您必须将“X-CSRF-TOKEN”添加到主布局<head></head> 标签。 VerifyCsrfToken 中间件还将检查 X-CSRF-TOKEN 请求标头。您可以将令牌存储在 html 元标记中：
<meta name="csrf-token" content=" csrf_token() ">
然后，一旦您创建了元标记，您就可以指示 jQuery 之类的库自动将标记添加到所有请求标头中。这为基于 AJAX 的应用程序提供了简单、方便的 CSRF 保护：
$.ajaxSetup(
headers:
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
);
更多详情请访问CSRF Protection Laravel-docs 7.x
【讨论】：
以上是关于laravel 7 csrf 令牌不匹配的主要内容，如果未能解决你的问题，请参考以下文章
Laravel + Vue.js (axios) - CSRF 令牌不匹配
为啥我在 laravel 中运行测试时收到“CSRF 令牌不匹配”？