POST请求在Postman中有效但在js代码中给出了Bad Request

Question

我正在使用Flask在本地服务器上托管一些python代码，我正在尝试发送带有图像的POST请求。 使用Postman，一切正常：

除了Content-Type（没有授权）之外，没有额外的标题。

javascript函数中的相同请求返回400（错误请求）。

    var form = new FormData();
    form.append("image", "image089.png");

    var settings = {
      "async": true,
      "crossDomain": true,
      "url": "http://127.0.0.1:5000/croprect",
      "method": "POST",
      "processData": false,
      "contentType": false,
      "mimeType": "multipart/form-data",
      "data": form
    }

    $.ajax(settings).done(function (response) {
      console.log(response);
    });

文件“image089.png”与脚本位于同一目录中。 此功能由单击事件包装并分配给按钮。 Web应用程序本地托管在Tomcat服务器中。 我不确定其他哪些信息会有用。

我发现了很多类似的问题，但大多数都没有答案。

编辑：使用XHR语法也不起作用：

    var xhr = new XMLHttpRequest();
    xhr.withCredentials = true;

    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === 4) {
        console.log(this.responseText);
      }
    });

    xhr.open("POST", "http://127.0.0.1:5000/croprect");

    xhr.send(data);

Answer 1

您没有正确附加到FormData对象。 目前，您正在将image的值设置为字符串。 相反，您需要指示FormData使用该字符串中包含的名称附加文件内容：

此方法有两个版本：两个和三个参数版本：

1| formData.append(name, value); 2| formData.append(name, value, filename);

更改

form.append("image", "image089.png");

至

form.append("image", BlobWithYourImage, "image089.png");

另外，注意这个警告：

如果指定Blob作为要附加到FormData对象的数据，则将在“Content-Disposition”标题中报告给服务器的文件名因浏览器而异。

参考