Ajax向Laravel上传文件设置processData等参数后出现CSRF token mismatch如何解决

你当前代码存在两处核心错误导致CSRF校验失败：

1. 你将普通字段、CSRF令牌、FormData对象混在同一个data对象中传输，同时设置了processData: false。该配置会阻止jQuery自动序列化data对象，导致服务端完全无法解析到你传入的_token字段，触发CSRF不匹配错误。
2. 向FormData追加文件时直接传入了jQuery选择器对象，没有获取到真实的文件对象，同时存在重复传参的问题。

修复代码 #

所有需要传输的参数（普通字段、CSRF令牌、文件）都需要统一追加到FormData对象中，直接将该对象作为ajax的data参数传输即可：

$("#saveChanges").click(function () {
    let formData = new FormData();
    // 追加文件，需取input的files[0]获取真实文件对象
    formData.append("banner", $("input[name='banner']")[0].files[0]);
    formData.append("logo", $("input[name='logo']")[0].files[0]);
    // 追加普通文本字段
    formData.append("pickUpBtnColor", $("input[name='pickUpBtnColor']").val());
    // 追加CSRF令牌到FormData中
    formData.append("_token", $('meta[name="csrf"]').attr("content"));

    $.ajax({
        url: "/save/website/data",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            console.log(error);
        },
    });
});

补充说明 #

• 请确认你的页面meta标签的name属性为csrf，如果用的是Laravel默认的csrf-token，需要将获取令牌的代码改为$('meta[name="csrf-token"]').attr("content")
• 你也可以选择将CSRF令牌放到请求头中传输，只需在ajax配置中新增如下配置即可，Laravel可直接识别：

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

内容的提问来源于stack exchange，提问作者theStackUser45