邮递员工作，但 fetch() 没有。为什么不？

Question

邮递员请求似乎有效，但我无法让 fetch() 处理相同的请求和标头。快把我逼疯了。

客户：

fetch('http://localhost:1234/acts/create', {
    method: 'POST',
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    body: JSON.stringify({
        name: 'BARNEY MCGREW!',
        rating: 90,
    })
})

快递：

exports.act_create = function (req, res) {
    console.log(' req >>>>', req.body);
    var act = new Act(
        {
            name: req.body.name,
            rating: req.body.rating
        }
    );

    // res.set('Content-Type', 'application/x-www-form-urlencoded');

    act.save(function (err) {
        if (err) {
            return console.log(err);
        }
        res.send('Act Created successfully')
    })
};

这会生成以下终端输出：

 req >>>> :  [Object: null prototype] { '{"name":"IngleburtHumperdink","rating":10}': '' }
act is:  { _id: 5c4245bea7bb511c20de6b7a }

所以它有点通过但后来我得到ValidationError: Act validation failed: name: Pathnameis required., rating: Path "rating" is required.

路径“名称”也一样。

因此，很难将 json 字符串化对象与传入的名称/评级值匹配。但是从 POST 请求的正文中删除 JSON.stringify 会给我一个req >>>> [Object: null prototype] { '[object Object]': '' }

我在这里做错了什么？

[并且是否有任何好的博客清楚地解释了如何通过正文传递数据，以便可以通过fetch() 毫无问题地访问它？ ]

Answer 1

x-www-form-urlencoded 请求正文必须是 name=BARNEY%20MCGREW%21&rating=90。

您通过fetch 发送请求，正文为'{"name":"BARNEY MCGREW!","rating":90}'。

由于没有=，整个JSON字符串被认为是一个空值的参数名。

因此，您从req.body 中获得了一个对象，其中字符串化的 JSON 显示为键。

---

通过将数据传递给构造函数来创建URLSearchParams - 替换JSON.stringify。

fetch('http://localhost:1234/acts/create', {
    method: 'POST',
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    body: new URLSearchParams({
        name: 'BARNEY MCGREW!',
        rating: 90,
    })
})

您的fetch 请求正文现在应该是name=BARNEY%20MCGREW%21&rating=90。

这将被正文解析器正确解析为x-www-form-urlencoded 内容。

---

如果 URLSearchParams 未定义，则有 npm 包会提供它。否则，它所做的就是通过使用= 编码和连接键和值，并使用& 连接每对，来构造一个 URL 参数字符串，可以这样完成：

function URLSearchParams(data) {
    return Object.keys(data).map(key => {
        return `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`;
    }).join('&');
}