How to fix TokenMismatchException in VerifyCsrfToken.php line 46: using ajax and laravel 5.0?

Question

I have problem regarding inserting my data in the database, so I have module where I need to insert the information of the song. So I just test the lower version of the laravel (5.0 Laravel Version) and Ajax for submitting the request to the backend. Now when I press the submit button it shows error of.

TokenMismatchException in VerifyCsrfToken.php line 46:

Error:

One thing is the token is sending to the backend

I will share to you guys my sample code that I already created. Please see the codes below.

Routes::

Route::post('/add_song','HomeController@add_song');

Front End::

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


$(document).ready(function(){


    $('.btn_add_music').on('click',function(e){

        var song_title = $('#song_title').val();
        var song_artist = $('#song_artist').val();
        var song_lyrics = $('#song_lyrics').val();
        var currentToken = $('meta[name="csrf-token"]').attr('content');

        // var data = new FormData();
        // data.append('song_title',song_title);
        // data.append('song_artist',song_artist);
        // data.append('song_lyrics',song_lyrics);
        // data.append('currentToken',currentToken);

        var formData = '_token=' + $('.token').val();

        $.ajax({
            url: '/add_song',
            data: formData,
            type: 'POST',
            contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
            processData: false, // NEEDED, DON'T OMIT THIS
            success:function(res) {
                console.log(res);
            },
            error:function(err) {
                console.log(res);
            }
            // ... Other options like success and etc
        })

    });
});

Back End::

public function add_song(Request $request) {

    dd($request->all());

    $song_title = $request->get('song_title');
    $song_artist = $request->get('song_artist');
    $song_lyrics = $request->get('song_lyrics');
    return response()->json('Success Inserted');
}

Html::

<div class="modal fade" id="ModalSong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Ready to Add New Song?</h5>
      <button class="close" type="button" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
    </div>
    <form>
      <div class="modal-body">
         <div class="container-fluid">
           <div class="row">
              <input type="hidden" class="token" name="_token" value="<?php echo csrf_token(); ?>">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="title"><b>Title:</b></label>
                  <input type="text" class="form-control" id="song_title">
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="artist"><b>Artist:</b></label>
                  <input type="text" class="form-control" id="song_artist">
                </div>
              </div>
           </div>

           <div class="form-group">
              <label for="comment"><b>Lyrics:</b></label>
              <textarea class="form-control" rows="5" id="song_lyrics"></textarea>
            </div>
         </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger btn_add_music" type="button">Submit</button>
      </div>
    </form>
  </div>
</div>

Answer 1

I believe you are sending your token wrong. That syntax seems off, but not my expertise area. Try the following instead.

var formdata= new FormData();    
fd.append('_token', $('.token').val());