请求在 Postman 上有效，但被 FETCH 接收为 'undefined'

Question

向后端发送信息时遇到问题。目前，我的前端有以下 fetch 函数：

function appending() {
        console.log('in Appending');
        console.log('formInfo', formInfo);
        console.log('formInfofrom', formInfo.from)
        
        fetch('http://localhost:3001/add-transaction', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: {
                from: formInfo.from,
                to: formInfo.to,
                amount: formInfo.amount,
                fee: formInfo.fee
            }
        }).then((backendResponse) => {
            if(backendResponse.ok)
                return backendResponse.json();
        }).then((theJSON) => {
            // ERROR: 1 - not enough funds
            // ERROR: 0 - no errors
            console.log('theJSON: ', theJSON);
            console.log('Error is: ', theJSON.error);

            if(theJSON.error === 1) {
                console.log('Insufficient')
                setBackendError("insufficient");
            }
            else if (theJSON.error === 0) {
                console.log("Sufficient funds")
                setBackendError("sufficient")
            }
            else {
                console.log("Mongo error")
                setBackendError("mongo");
            }

        }).catch((error) => {
            console.log('error is', error);
        })
    }

formInfo 是一个 JSON object，它有 4 个 key/value 对，from 键，to 键，amount 和 fee:

const formInfo = { "from": "", "to": "", "amount": "", "fee":"" };

当我在发送交易后检查控制台时，我看到以下内容：

这告诉我它是有效的。但是，当我检查后端时，我在控制台中看到 req.body.from 的结果为 undefined：

这条路线的代码如下：

app.post('/add-transaction', (req, res) => {
        
    console.log('requestFrom', req.body.from);

        blockModel.find({ $or: [{ from: req.body.from }, { to: req.body.from }, { miner: req.body.from }] }).then((blocks) => {
            if (!blocks.length) {
                yakhicoin.addBlock(new Block("system", req.body.from, 1000, 0, "null", 0));
                const newblock = new blockModel(yakhicoin.getLatestBlock());
                newblock.save();
            }
            let balance = 0;
            for (const block of blocks) {
                if (block.from == req.body.from) {balance -= (block.amount + block.fee);}
                if (block.to == req.body.from) {balance += block.amount;}
                if (block.miner == req.body.from) {balance += (block.fee + block.reward);}
            }
            if (req.body.amount <= balance || (!blocks.length && req.body.amount <= 1000)) {
                const formData = {
                    "from": req.body.from,
                    "to": req.body.to,
                    "amount": req.body.amount,
                    "fee": req.body.fee
                }
                const newtransaction = new transactionModel(formData);
                newtransaction
                    .save() //  Promise
                    .then( //resolved...
                        (success) => {
                            res.send({"transaction" : success, "error" : 0});
                        }
                    )
                    .catch( //rejected...
                        (error) => {
                            res.send({"error" : error});
                        }
                    );
            }
            else
                res.json({"error" : 1})
        })
})

当我在 POSTMAN 中使用相同的路由时，一切正常：

与以下 headers:

无论我检查多少次，我都不明白为什么会出现这个错误。为什么 formInfo 在发送之前就存在，但突然收到未定义的消息？我还启用了 cors()。感谢您的帮助！

Answer 1

问题是 body 编码在浏览器示例中与 postman 示例不同。

当使用您当前使用的内容类型时，post 请求中的正文应该是一个字符串（如下例）。

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'from=xxxxx&to=yyyyyy....etc'
  })

或者您可以更改内容类型并将对象字符串化。

fetch(url, {
    method: 'post',
    headers: {
    Content-Type: 'application/json',
    // 'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: JSON.stringify(formInfo)
})

请求在 Postman 上有效，但被 FETCH 接收为 'undefined'

Request works on Postman, but is received as 'undefined' by FETCH

javascript

reactjs

postman