Laravel 5.4 TokenMismatchException Ajax-вызов

Question

Я получаю ошибку TokenMismatchException только при отправке формы с помощью вызова ajax?Если я не использую Ajax-вызов, я не получаю сообщение об ошибке.

Что вызывает это?

Laravel 5.4

У меня это в головеapp.blade.php:

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

My ajax.js

$( document ).ready(function() {
    // storing comments
    $('#storeComment').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            method: 'POST',
            url: '/comments',
            data: {},
            success: function(response){
                console.log(response);
            },
            error: function(jqXHR, textStatus, errorThrown) { 
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
    });
});

Я также использую bootstrap.js, который автоматически регистрирует значение метатега csrf-token с HTTP-библиотекой Axios,Как объяснено в документации Laravel.

Метод управления:

public function store(CommentRequest $request)
{
    $comment = Auth::user()->comments()->save(new Comment($request->all()));

    $response = array(
        'status' => 'success',
        'comment' => $comment
    );

    return response()->json($response);
}

Answer 1

Добавьте csrf-token к заголовку вашей заявки:

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

, затем:

$.ajax({
  url: '/some/url',
  type: 'POST',
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  success: function(res){
      // Your result
      console.log(res);
  }
});

Answer 2

$.ajax({
          type: 'POST',
          ........
            headers: {
                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
           }    
         ...........
  });

попробуйте это ...

Answer 3

Вместо того, чтобы звонить jQuery, вы можете позвонить Axios напрямую и получить этот automatic csrf injection со следующим кодом:

var data = ['name' => 'Nikola', 'lastName' => 'Gavric'];
axios.post('/comments', data).then(function(response) {
    console.log(response);
});

РЕДАКТИРОВАТЬ: Полный пример для axios:

$('#storeComment').on('submit', function(e) {
    e.preventDefault();

    // Retrieve form data
    var temp = [];
    var data = $(this).serializeArray();
    $.each(data, function(index, field) {
        temp[field.name] = field.value;
    });

    // Post request with temp as data
    axios.post('/comments', temp).then(function(data) {
        console.log(data); 
    });
});

А это код для jQuery, используйте тот подход, который вам больше нравится:

    $.ajax({
        method: 'POST',
        url: '/comments',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            'name': 'Nikola',
            'lastName': 'Gavric'
        },
        success: function(response){
            console.log(response);
        },
        error: function(jqXHR, textStatus, errorThrown) { 
            console.log(JSON.stringify(jqXHR));
            console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
        }
    });

Answer 4

Вы можете попытаться отключить проверку CSRF для конкретного маршрута в App\Http\Middleware\VerifyCsrfToken.php

 protected $except = ['/comments'];

Answer 5

Добавьте токен к данным ajax:

$.ajax({
type: 'POST',
 ......
data: {'_token': '{{ csrf_token() }}'},
........