javascript - postman 工作但 fetch() 没有。为什么不？

Question

postman 请求似乎有效，但我无法让 fetch() 处理相同的请求和 header 。这让我发疯。

客户:

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

express :

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]': ''

我在这里做错了什么？

[是否有任何好的博客清楚地解释了如何通过 body 传递数据，以便可以通过 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 Params 字符串，这可以完成像这样:

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