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

CSRF token mismatch when setting processData: false, contentType: false,

大家好,我正在尝试使用 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 令牌不匹配”。 谁有解决办法?

问题是因为您需要将所有表单字段值放在一个 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() 调用。