为什么没有通过 fetch() 发送 FormData 对象？答案

【问题标题】：Why is the FormData object not being sent via fetch()?为什么没有通过 fetch() 发送 FormData 对象？
【发布时间】：2021-09-10 00:24:33
【问题描述】：

const userAPI = "https://reqres.in/api/users"

$("#myForm").on("submit", function(e) { 
    e.preventDefault();

    const formData = new FormData(this);

    // console.log(formData.get("inp_username"))

    fetch(userAPI, { 
        method: "POST",
        body: formData
    }).then((res) => { 
        return res.json();
    }).then(val=> console.log(val))
    .catch(err => console.log(err))

})

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

<form class="form" id="myForm">
    <label for="inp_username">Username</label>
    <input type="text" id="inp_username" name="inp_username">
    <label for="inp_password">Password</label>
    <input type="text" id="inp_password" name="inp_password">
    <button type="submit">Login</button>
</form>

由于某种原因，它不起作用。 FormData 未发送。似乎来自form 的数据实际上存储在对象中，因为我可以用get() 对其进行控制台，并且值在那里，但它没有被发送。返回的值应该与我发送的用户名和密码相同，但我没有取回它。

如果我使用URLSearchParams，它可以工作，但它不能单独使用FormData。

我尝试将Content-Type 更改为application/x-www-form-urlencoded，当我这样做时，我得到了一个奇怪的响应，其中包括发送的数据，但它也包括一大堆我不明白的乱码，也不应该在那里。我应该得到一个包含我发送的数据的简单 JSON 对象。

如果我尝试追加数据，它也不起作用。

是我做错了什么，还是我不了解FormData 的工作方式？

编辑

只是为了让自己清楚。服务器的响应必须与您输入的用户名和密码以及 ID 和凭据相同。

尝试用查询字符串而不是 FormData 替换正文，您将看到应该得到的响应。

例子：

 headers: {"Content-Type": "application/x-www-form-urlencoded"},
 body: "name=Donald"

响应将是：

{name: "Donald", id: "694", createdAt: "2021-06-27T12:41:47.798Z"}

【问题讨论】：

这里对我来说一切正常。您是否收到错误、不需要的响应状态或什么？
我没有收到任何错误。我只是没有收到我发送的数据。
你能发一张快照吗？你真的得到你输入的用户名和密码了吗？
您使用的是哪个后端？
所以你的问题不是 Fetch 不能发送 FormData - 你的问题是你的服务器端代码不能理解 multipart/form-data 并且只能理解 application/x-www-form-urlencoded

标签： javascript fetch multipartform-data fetch-api form-data

【解决方案1】：

你应该像下面这样转换formData：

body: JSON.stringify(Object.fromEntries(formData))

它会起作用的。

【讨论】：

还是不行。您应该获得与您输入的用户名和密码相同的用户名和密码。
@happy_story 响应与您的问题无关，响应来自服务器。