fetch - 多部分表单数据 POST 中缺少边界

etc

使用fetch发送POST请求时，我们可以使用多部分/表单数据来上传文件或发送表单数据。在发送多部分/表单数据POST请求时，请求头中需要包含一个边界（boundary），用于分隔不同的数据部分。然而，如果我们在请求头中没有正确设置边界，就会导致请求失败。

什么是多部分/表单数据POST请求？

多部分/表单数据POST请求是一种常见的方式，用于向服务器发送表单数据或文件。与普通的POST请求不同，多部分/表单数据POST请求可以同时发送多个字段或文件，每个字段或文件都有自己的名称和值。

为什么在多部分/表单数据POST请求中需要边界？

边界是用于分隔不同的字段或文件的标识符。在请求头中，我们需要在Content-Type字段中指定边界，并且在请求体中通过边界来分隔不同的数据部分。这样服务器就能够正确地解析请求，将不同的字段或文件提取出来。

案例代码

下面是一个使用fetch发送多部分/表单数据POST请求的案例代码：

Javascript
const formData = new FormData();
formData.append('username', 'John Doe');
formData.append('emAIl', 'johndoe@example.com');
formData.append('avatar', fileInput.files[0]);
fetch('/api/user', {
  method: 'POST',
  body: formData
})
.then(response => response.JSon())
.then(data => console.log(data))
.catch(error => console.error(error));

上述代码中，我们创建了一个FormData对象，并通过append方法添加了三个字段：username、emAIl和avatar。其中，avatar字段是一个文件输入框的值。然后，我们使用fetch发送了一个POST请求到/api/user接口，并将FormData对象作为请求体。

缺少边界的问题

如果我们在请求头的Content-Type字段中没有正确设置边界，就会导致请求失败。服务器无法正确解析请求体，因为无法分隔不同的字段或文件。

为了解决这个问题，我们需要在请求头的Content-Type字段中设置正确的边界。边界可以是任何字符串，只要它在请求体中没有出现即可。通常，我们可以使用一串随机生成的字符作为边界。

下面是一个正确设置边界的示例代码：

Javascript
const formData = new FormData();
formData.append('username', 'John Doe');
formData.append('emAIl', 'johndoe@example.com');
formData.append('avatar', fileInput.files[0]);
const boundary = '----WebKitFormBoundary' + Math.random().toString().substr(2);
const headers = {
  'Content-Type': 'multipart/form-data; boundary=' + boundary
};
const body = [];
for (let [key, value] of formData.entries()) {
  body.push('--' + boundary);
  body.push(<code>Content-Disposition: form-data; name="${key}"</code>);
  body.push('');
  body.push(value);
}
body.push('--' + boundary + '--');
const requestBody = body.join('\r\n');
fetch('/api/user', {
  method: 'POST',
  headers: headers,
  body: requestBody
})
.then(response => response.JSon())
.then(data => console.log(data))
.catch(error => console.error(error));

在上述代码中，我们首先生成一个随机的边界字符串，并将其添加到请求头的Content-Type字段中。然后，我们通过循环遍历FormData对象的每个字段，生成请求体中的每个部分，并将它们存储在一个数组中。最后，我们将数组中的每个部分使用换行符拼接形成最终的请求体。

通过以上的代码，我们可以正确地发送多部分/表单数据POST请求，并且在请求头中包含了正确的边界。这样服务器就能够正确解析请求，提取出不同的字段或文件。