csrf token mismatch even token exist-CodePudding

i make ajax call for method using ajax and laravel so i put the token on the head of my blade file and send it with the form but i get an error 219 'csrf token mismatch " i can't find way i'm getting the error

 <head>
            <meta name="csrf-token" content="{{ csrf_token() }}" />
    </head>
     <form id="formId">
                               <input id="news_letter_mail"
                                      name="email"
                                           
                                          placeholder="Entrez votre E-mail *" />
                                       
                                          <div >
                                            <a href="#" id="newsletter"> <button  >Envoyer un Message</button> </a>
                                               <span><i class='bx bx-right-arrow-alt'></i></span>
                                           </div>
                           </form>

     <script>
        $("#newsletter").click(function(event){
        event.preventDefault();
        var name="moussa";
        var email="[email protected]";
        var message="ok";
         var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
         console.log(CSRF_TOKEN);
            
            $.ajax({
                url: '/newsletter',
                type: 'POST',
                dataType: 'json',
                // headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                data:{_token: CSRF_TOKEN,name: name,email: email,message: message}, // the value of input having id vid
                success: function(response){ // What to do if we succeed
                    console.log(response);
                },
               
                error: function (error) {                
                }
                
            });
           
        });
        </script>

CodePudding user response：

There many way to add updated CSRF token in your ajax request.

Add following hidden field inside your form

<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

inside you js file

var CSRF_TOKEN = $('#token').val();

It will work fine.

CodePudding user response：

Add the following meta tag in your layout header

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

Then in ajax call, include this headers

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

Hope, it will solve your problem

CodePudding user response：

You can generate csrf while sending AJAX call like this.

    let mail = {
    _token: "{{ csrf_token() }}",
    name: 'Mister. ABC',
    email: '[email protected]',
    message: 'OK',
}

$.ajax({
    url: '/newsletter',
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    data:mail, // the value of input having id vid
    success: function(response){ // What to do if we succeed
        console.log(response);
    },

    error: function (error) {
    }

});

Most effective one I have been using this.