php - 设置 processData : false, contentType : false, 时 CSRF token 不匹配

Question

嘿，大家好，我正在尝试使用 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 token 不匹配”。 有人有解决办法吗？

Answer 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 元素包含在表单中，您可能会简化此操作； Hook 到 form 元素的 submit 事件而不是按钮的 click 事件，然后调用 let formData = new FormData(引用您的表格此处)；。以这种方式使用构造函数时，不需要 append() 调用。