带有令牌传递的laravel中的Ajax发布请求中的TokenMismatchException

Question

我正在使用 ajax 提交表单数据，并且在传递令牌时收到此令牌不匹配错误。 这是我的代码 sn-p：

var _csrfToken = $('meta[name=token]').attr('content');
var link = $('meta[name=url]').attr('content');


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

$('#upload_form').submit(function(e)
{
    e.preventDefault();
    var title = $('#title').val();
    var designation = $('#position').val();
    var category = $('#category').val();
    var azimaData = {
        name: title,
        designation: designation,
        category: category,
         _token: _csrfToken
    };

    console.log(azimaData);

    $.ajax({
        method: 'POST',
        url: link + '/@dashboard@/galleryImage/add_image',
        data: azimaData,
        //use contentType, processData for sure.
        contentType: false,
        processData: false,

        success: function(msg) {

            if(msg.status == success)
            {
                alert(msg.msg);
            }
            else
            {
                alert(msg.msg);
            }
        },
        error: function(xhr) {

            console.log(xhr);
        }
    });

});

其他 Ajax 请求在令牌问题上运行良好。我在哪里做错了？

Answer 1

在将 contentType 和 processData 选项设置为 false 后，您不能以对象形式发送数据。因此，在这种情况下，您可以通过序列化表单或创建新的 FormData 实例并手动将数据附加到其中来发送数据。

我已经编辑了您的代码。并已使用 FormData 与令牌一起发送数据。

    $('#upload_form').submit(function(e)
    {
        e.preventDefault();
        var title = $('#title').val();
        var designation = $('#position').val();
        var category = $('#category').val();
        var azimaData = new FormData(); // create a new FormData.. 
        azimaData.append('name', title);
        azimaData.append('designation', designation);
        azimaData.append('category', category);
        azimaData.append('_token', _csrfToken);

        $.ajax({
            method: 'POST',
            url: link + '/@dashboard@/galleryImage/add_image',
            data: azimaData,
            //use contentType, processData for sure.
            contentType: false,
            processData: false,

            success: function(msg) {

                if(msg.status == success)
                {
                    alert(msg.msg);
                }
                else
                {
                    alert(msg.msg);
                }
            },
            error: function(xhr) {

                console.log(xhr);
            }
        });

    });

Answer 2

通过从您的 ajax 请求中删除 contentType: false 和 processData:false 来尝试 ajax 请求。

$.ajax({
    method: 'POST',
    url: link + '/@dashboard@/galleryImage/add_image',
    data: azimaData,
    success: function(msg) {
        if(msg.status == success) {
            alert(msg.msg);
        } else {
            alert(msg.msg);
        }
    },
    error: function(xhr) {
        console.log(xhr);
    }
});

jQuery AJAX documentation

Answer 3

更改您的meta name。应该是这样的

var _csrfToken = $('meta[name=_token]').attr('content');