在 fetch api 中使用 FormData() 不起作用

Posted 2023-02-27

【中文标题】在 fetch api 中使用 FormData() 不起作用

【英文标题】：Using FormData() inside fetch api is not working

【发布时间】：2020-10-20 00:30:47

【问题描述】：

我读了一遍，但找不到答案。

当我使用 FormData() 时，它返回状态 404 错误请求。

但是，如果我像 const requestBody（下面的示例）一样传递数据（硬编码），它会完美运行。

这是我的代码：

    var formData = new FormData();
    formData.append("nickname", "johxns");
    formData.append("password", "john_password");
    formData.append("email", "[e-mail]");

    // If I do it this way, and assign this to body inside fetch, it works perfectly
    // const requestBody = '"nickname": "johxns","password":"john_password","email":"[e-mail]"';

    fetch("http://localhost:5000/create_user", 
        // if instead of formData, I assign requestBody to body, it works!
        body: formData,
        headers: 
            "Content-Type": "application/json"
        ,
        method: "POST"
    ).then(function(response) 
        return response.text();
    ).then(function(data)
        console.log('data', data);
    ).catch(function(err)
        console.err(err);
    );

我已经尝试过使用 URLSearchParams，但仍然无法使用。

谢谢。

【问题讨论】：

你试过将formData转成json吗？

好吧，如果它以一种方式而不是另一种方式工作，我会坚持这种工作方式......有什么问题？

【参考方案1】：

如果您不发送 json，则不应将 Content-Type 标头设置为 application/json。根据this 的回答，你不需要设置Content-Type 标头。

正文数据类型必须匹配“Content-Type”标头

Using Fetch

【参考方案2】：

如果您将Content-Type 设置为application/json，您应该发送 json 数据；如果使用 FormData API，您应该不设置任何 Content-Type，因为 fetch 函数能够确定正确的 Content-Type。

更多信息请参见here。