设置 processData: false, contentType: false 时的 CSRF 令牌不匹配,答案

【问题标题】：CSRF token mismatch when setting processData: false, contentType: false,设置 processData: false, contentType: false 时的 CSRF 令牌不匹配,
【发布时间】：2021-08-30 06:49:15
【问题描述】：

大家好，我正在尝试使用 ajax 将文件发送到 Laravel 服务器，因为我需要创建表单数据并使用 ajax 请求发送它，为了防止非法调用，我需要设置这些

 processData: false,
 contentType: false,

这是我的代码->

$("#saveChanges").click(function () {
    let formData = new FormData();

    formData.append("banner", $("input[name='banner']"));

    $.ajax({
        url: "/save/website/data",
        type: "POST",

        data: {
            pickUpBtnColor: $("input[name='pickUpBtnColor']").val(),
            banner: $("input[name='banner']").val(),
            logo: $("input[name='logo']").val(),
            _token: $('meta[name="csrf"]').attr("content"),
            formData: formData,
        },
        processData: false,
        contentType: false,
        success: function (data) {
            console.log(data);
        },
        error: function (error) {
            console.log(error);
        },
    });
});

但是当我设置这些时，我的 csrf 也会被忽略，服务器会以“CSRF 令牌不匹配”进行响应。谁有解决办法？

【问题讨论】：

标签： php jquery ajax laravel multipartform-data

【解决方案1】：

问题是因为您需要将所有表单字段值放在单个 FormData 对象中并在请求中发送。

$("#saveChanges").click(function() {
  let formData = new FormData();
  formData.append("banner", $("input[name='banner']"));
  formData.append('pickUpBtnColor', $("input[name='pickUpBtnColor']").val());
  formData.append('banner', $("input[name='banner']").val());
  formData.append('logo', $("input[name='logo']").val());
  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);
    },
  });
});

请注意，如果您的 input 元素包含在表单中，您可能会简化此操作；挂钩到form 元素的submit 事件而不是按钮的click，然后调用let formData = new FormData(referenceToYourFormHere);。以这种方式使用构造函数时，不需要append() 调用。

【讨论】：