Laravel 5 - 带有 CSRF 保护的 AJAX 图像上传答案

【问题标题】：Laravel 5 - AJAX image upload with CSRF protectionLaravel 5 - 带有 CSRF 保护的 AJAX 图像上传
【发布时间】：2016-02-16 23:51:37
【问题描述】：

我设置了一个表单来上传图片。我之前使用的是 DropZone.js，它工作得很好，并将 CSRF 令牌与 ajax 调用一起发送。服务器端的一切都很好，但是在没有 DropZone 的情况下尝试执行此操作时，我遇到了令牌不匹配错误。

这是我的 AJAX 调用：

    $(document).on('submit', ".hidden-image-upload", function(e){
    e.preventDefault();
    $.ajax({
        url:'/project/uploadImage',
        data:{
            data:new FormData($("#upload_form")[0]),
        },
        dataType:'json',
        async:false,
        type:'post',
        processData: false,
        contentType: false,
        success:function(response){
            console.log(response);
        },
    });
});

这是 HTML：

<form method="POST" action="http://localhost/project/create" accept-charset="UTF-8" class="hidden-image-upload">
    <input name="_token" type="hidden" value="5lgtt8AgbeF3lprptj8HNXVPceRhoJbqBeErBI1k">
    <input class="cover-image-upload-button" name="file" type="file">
</form>

我该如何整理我的 AJAX 调用/Laravel 以协同工作？

【问题讨论】：

你的 CSRF 令牌在哪里？
试试我的答案。如果有效

标签： php jquery ajax laravel-5

【解决方案1】：

您可以使用 $.ajax 在标头中发送令牌。

$(document).on('submit', ".hidden-image-upload", function(e){
    e.preventDefault();
    $.ajax({
        url:'/project/uploadImage',
        data:{
            data:new FormData($("#upload_form")[0]),
        },
        headers: {
           'X-CSRF-Token': $('form.hidden-image-upload [name="_token"]').val()
        }
        dataType:'json',
        async:false,
        type:'post',
        processData: false,
        contentType: false,
        success:function(response){
            console.log(response);
        },
    });
});

在最坏的情况下，禁用该路由中的 CSRF 检查，只需在 app/Http/Middleware/VerifyCsrfToken.php 中的数组 $except 中添加路由

【讨论】：

【解决方案2】：

试试这个。您还必须将您的 CSRF 令牌与您的 FormData 一起传递：

$(document).on('submit', ".hidden-image-upload", function(e){
e.preventDefault();

var data = new FormData($("#upload_form")[0]);
    data.append('_token', $('input[name="token"]').val());

$.ajax({
    url:'/project/uploadImage',
    data:{
        data: data,
    },
    dataType:'json',
    async:false,
    type:'post',
    processData: false,
    contentType: false,
    success:function(response){
        console.log(response);
    },
});

});

【讨论】：

请不要这样做。相反，请遵循文档中列出的指南并设置 X-CSRF-TOKEN 标头。