获取 CSRF 令牌不匹配 Laravel

Question

I'm trying to submit a form with javascript but I keep getting this error CSRF token mismatch . I tried to change var url = "{{ route('review.store') }}"; to {{ route('review.store') }}?_token={{ csrf_token() }} and it was submitting the form to the database without data. I have seen a lot of question similar to this but I didn't get a solution for my case.How can I fix this?

<form id="form" enctype="multipart/form-data">
    <input type="hidden" value="{{csrf_token()}}" id="token"/>
<div class="form-group" >
<label for="title">Title</label>
<input type="text" name="title" >
</div>

<div class="form-group">
<label for="description">Description</label>
<input type="text" name="description">
</div>
</form>
<input type='button' value="Submit" id="btn"/>

Javascript

var token = $("#token").val();
$(document).ready(function(){

$("#btn").click(function(event){
event.preventDefault();
var url = "{{ route('review.store') }}";
var form = $('#form')[0];
var formData = new FormData(form);
formData.append('_token', token);
$.ajax({
    url: url,
    data: formData,
    type: 'POST',
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){
    if($.isEmptyObject(data.error)){
    $("#msg").html("successfull");
    $("#msg").fadeOut(3000);
     }
    }
});
});

});

Route

  Route::resource('review','ProductReviewController');

Answer 1

You are missing the name _token in hidden field , Just serialize the form and send request

    <form id="form" enctype="multipart/form-data">

    <input type="hidden" name ="_token" value="{{csrf_token()}}" id="token"/>
    <div class="form-group" >
    <label for="title">Title</label>
    <input type="text" name="title" >
    </div>

    <div class="form-group">
    <label for="description">Description</label>
    <input type="text" name="description">
    </div>
<input type='button' value="Submit" id="btn"/>

    </form>


$(document).ready(function(){

$("#btn").click(function(event){
event.preventDefault();
var url = "{{ route('review.store') }}";
var formData = $('#form').serializeArray();
$.ajax({
    url: url,
    data: formData,
    type: 'POST',
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){
    if($.isEmptyObject(data.error)){
    $("#msg").html("successfull");
    $("#msg").fadeOut(3000);
     }
    }
});
});

});

Answer 2

In your jquery, please get the token like this:

    var data = {
        "_token": $('#token').val()
    };

You can also try like

    data: {
       "_token": "{{ csrf_token() }}",
       "id": myid
    }

So you ajax request would be

$.ajax({
  url : "url",
  method:"post",
  data : {
    "_token": $('#csrf-token')[0].content
  },
  // Other stuffs to do
});

Answer 3

Try to use like this please and than serialize your form data

<form id="form" enctype="multipart/form-data">    
    {{csrf_field()}}
    <div class="form-group" >
        <label for="title">Title</label>
        <input type="text" name="title" >
    </div>
    <div class="form-group">
        <label for="description">Description</label>
        <input type="text" name="description">
    </div>
    <input type='button' value="Submit" id="btn"/>
</form>

Answer 4

尝试使用@csrf或{{ csrf_field() }}

Answer 5

you can still try this. i takeaway the form tag and the csrf token on the form

//form

    <div class="form-group" >
    <label for="title">Title</label>
    <input type="text" id="title" name="title" >
    </div>

    <div class="form-group">
    <label for="description">Description</label>
    <input type="text" id="description" name="description">
    </div>
    </form>
    <input type='button' class="btn-submit" value="Submit" id="btn"/>

//ajax call

<script>
$(function() {
   $(".btn-submit").click(function(e){

        var title= $("input[name=title]").val();

        var description= $("input[name=description]").val();


        $.ajax({
              url: murl +'/your-url',
              type: "post",
              data: {'title':title, 'description':description, '_token':  $('input[name=_token]').val()},
              success: function(data){

              console.log(data);

              }


        });


    });


});



</script>

Answer 6

The best way to solve this problem "X-CSRF-TOKEN" is to add the following code to your main layout, and continue making your ajax calls normally:

In header

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

In Form , add anywhere csrf token inside the form

<form>
{{ csrf_field() }}
</form>

In script

<script type="text/javascript">
$.ajax({
    url: url,
    data: formData,
    type: 'POST',
    cache: false,
    contentType: false,
    processData: false,
    headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    success:function(data){
    if($.isEmptyObject(data.error)){
    $("#msg").html("successfull");
    $("#msg").fadeOut(3000);
     }
    }
});

</script>

I hope it will works for you

Answer 7

I suggest that you should use

@csrf

And

@method("PUT")

inside your form HTML tag, then new FormData() handles the crsf and the method inputs