laravel 7 csrf token 不匹配

Question

我正在使用 laravel 7 和带有 ajax 登录和注册的默认身份验证以及 bootstrap 4 模态窗口。但是在登录后重新发送验证链接并且注册时显示“CSRF token 不匹配错误”，下面是我的代码:

    #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 Blade 布局中的模式中。登录后单击“重新发送验证链接”按钮时显示“csrf token 不匹配”，但刷新页面后它可以正常工作!我从同一页面发送 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">&times;</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">&times;</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">&times;</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>

Answer 1

要解决此问题，您必须将“X-CSRF-TOKEN”添加到主布局 <head></head>标签。 VerifyCsrfToken 中间件还将检查 X-CSRF-TOKEN 请求 header 。您可以将 token 存储在 HTML 元标记中:

<meta name="csrf-token" content="{{ csrf_token() }}">

然后，一旦您创建了元标记，您就可以指示像 jQuery 这样的库自动将 token 添加到所有请求 header 中。这为基于 AJAX 的应用程序提供了简单、方便的 CSRF 保护:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

更多详情请访问CSRF Protection Laravel-docs 7.x