浏览器强制发送multipart/formdata

Question

我正在使用 fetch API 从浏览器发送一个发布请求。这是我的代码：

const headers = new Headers();
headers.append("Content-Type", "application/x-www-form-urlencoded");

fetch('/signup', {
  method: 'POST',
  body: new FormData(document.querySelector('form')),
  credentials: 'same-origin',
  headers
}).then(
  response => response.text()
).then(
  text => console.log(text)
);

我的表单仅包含文本、电子邮件和密码输入类型。我期待表单数据与内容类型 application/x-www-form-urlencoded 一起发送，但是它作为 multipart/formdata 发送。

我已尝试手动设置获取请求的标头并明确指定表单的 encType 属性（即使默认情况下它应该是 url 编码的），但它不起作用。

Chrome 和 Safari 都会出现这种情况。我可以通过使用 JSON 轻松解决这个问题，但我真的很想知道为什么会这样！

Answer 1

来自the spec：

打开对象的类型：

表单数据

将 action 设置为运行 multipart/form-data 编码算法的操作，对象为表单数据集，utf-8 为显式字符编码。

将 Content-Type 设置为multipart/form-data;boundary=，后跟 multipart/form-data 编码算法生成的 multipart/form-data 边界字符串。

它使用 multipart 是因为您正在传递一个 FormData 对象，而这正是 fetch 对 FormData 对象所做的事情。

---

如果您想发送 application/x-www-form-urlencoded 数据，请手动对其进行编码或使用实现 URLSearchParams 接口的对象。

你不应该这样做。 multipart/form-data 是一个标准，我从来没有遇到过不能处理它的表单数据解析库。您应该拥有的唯一不利因素是它会使请求占用更多字节。