如何修复 VerifyCsrfToken.php 第 46 行中的 TokenMismatchException：使用 ajax 和 laravel 5.0？

Question

我在将数据插入数据库时​​遇到问题，所以我有需要插入歌曲信息的模块。所以我只是测试了较低版本的 laravel（5.0 Laravel 版本）和 Ajax 用于向后端提交请求。现在，当我按下提交按钮时，它会显示错误。

VerifyCsrfToken.php 第 46 行中的 TokenMismatchException：

错误：

一件事是令牌正在发送到后端

我将与你们分享我已经创建的示例代码。请看下面的代码。

路线::

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

前端::

$.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
        })

    });
});

后端::

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

我相信您发送的令牌有误。这种语法似乎不对，但不是我的专业领域。请尝试以下方法。

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