表单提交与 Javascript POST 请求

Question

我正在POST用一个非常简单的 HTML 提出请求form。请求在form格式上失败，但在 Javascript 中工作。

这很简单，所以这里几乎是整个表单：

<form method="post" action="[apiUrl]" target="_blank">
  <input type="hidden" name="payload" value="[payload]">
  <!-- ... -->
</form>

*请注意，[apiUrl]和[payload]是注入到 HTML 中的变量。

请求失败并显示来自 API 的自定义消息（似乎无法解析有效负载）：

{
  "Error": {
    "Message": "Noun and Verb are Required Request Parameters",
    "ValidationError": false
  },
  "Result": "ERROR"
}

但是，当由 Javascript 执行时，完全相同的请求会成功（我已经使用 Axios 和 jQuery 以及 Paw 进行了测试）。

$.post(this.apiUrl, this.payload, response => {
  console.log('Success!', response);
});

这payload只是一个 Javascript Object。变量设置如下：

this.apiUrl = request.url;
this.payload = JSON.stringify(request.parameters);

为什么它失败了form？

Answer 1

我在使用 JSON apis 分别构建后端（使用 Node&Express.js）和前端（Angular.js）时遇到了类似的问题。花了 12 个小时才找到不使用 html 表单的原因。
问题出在后端，当您使用 jquery 提交时$.post， Content-type 是，application/json但是当您使用 html formContent-type提交时，Content-type 是application/form-data.

postman如果您选择内容类型，您可以使用 测试 API ，因为form-data该 API 将不起作用。

所以要解决这个问题，你必须重建后端 apis 以兼容 Content-type application/form-data。

此外，在我的情况下，我使用body-parser节点包来分析表单数据。