XMLHttpRequest 是一种用于在前端发送 HTTP 请求的 API，而 FormData 则是一种用于构建表单数据的对象。在使用 FormData 发送请求时，有时需要添加一些头部数据以便服务器进行认证或其他操作。本文将介绍如何通过 XMLHttpRequest 向 FormData 发送请求并添加头部数据。
问题描述
在使用 XMLHttpRequest 发送 FormData 请求时，我们通常使用以下代码：
const formData = new FormData();
formData.append('file', file);
const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.send(formData);这段代码会创建一个 FormData 对象，并将文件数据添加到其中。然后，我们使用 XMLHttpRequest 发送该 FormData 对象作为请求体。
不过，在某些情况下，服务器可能需要在请求头中包含一些额外的信息，例如身份验证信息。那么，如何在发送 FormData 请求时添加这些额外的头部数据呢？
解决方案
要在 FormData 请求中添加头部数据，我们需要先创建一个 XMLHttpRequest 对象，并在发送请求之前添加所需的头部数据。然后，我们将 FormData 对象作为请求体发送即可。
下面是代码示例：
-- -------------------- ---- ------- ----- --- - --- ----------------- ---------------- ----------- -- ------ ------------------------------------- ------- - - ------- ----- -------- - --- ----------- ----------------------- ------ -------------------
在这个示例中，我们首先创建了一个 XMLHttpRequest 对象，并设置请求的方法和 URL。然后，我们使用 setRequestHeader 方法添加了一个名为 'Authorization' 的头部信息，并将其值设置为字符串 'Bearer ' + token。这里的 token 变量应该是从服务器获取到的身份验证令牌。
最后，我们创建了一个 FormData 对象，并将文件数据添加到其中。然后，我们使用 xhr.send(formData) 发送请求，其中包含了我们所添加的头部数据。
总结
在使用 FormData 发送请求时，有时需要向请求中添加一些额外的头部数据以便服务器进行认证或其他操作。要实现这个目标，我们可以使用 XMLHttpRequest 的 setRequestHeader 方法来添加头部数据，然后将 FormData 对象作为请求体发送。
这种方法不仅适用于上传文件，也适用于其他类型的表单数据。如果您在使用 FormData 发送请求时遇到了类似的问题，希望本文能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25817