Node、Express、vanilla JS POST 表单未向 API 发送数据答案

【问题标题】：Node, Express, vanilla JS POST form not sending data to APINode、Express、vanilla JS POST 表单未向 API 发送数据
【发布时间】：2021-05-28 14:38:13
【问题描述】：

我正在使用Node JS和Express JS进行表单提交推送数据到数据库。

这是我的表格

<form action="/pokedex/register/poke_submission" method="POST">
                <div>
                    <label for="name">Pokemon</label>
                    <input type="text" name="name" id="name" required />
                </div>
                <div>
                    <label for="number">Number</label>
                    <input type="text" name="number" id="number" required />
                </div>
                <div>
                    <label for="primaryType">Primary Type</label>
                    <input
                        type="text"
                        name="primaryType"
                        id="primaryType"
                        required
                    />
                </div>
                <div>
                    <label for="secondayType">Secondary Type</label>
                    <input type="text" name="secondayType" id="secondayType" />
                </div>

这是我的 POST API

app.post("/pokedex/register/poke_submission", async function (req, res) {
    const poke = new Pokemon({
        information: {
            name: req.body.name,
            dexNumber: req.body.dexNumber,
            primaryType: req.body.primaryType,
            secondaryType: req.body.secondaryType, // Not required
    });
    try {
        const newPokemon = await poke.save();
        res.send(newPokemon);
    } catch (err) {
        res.send(req.body);
        console.log(err);
    }
});

我正在使用这两个

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

当我点击提交时，它会将我发送到 /pokedex/register/poke_submission 但出现 405 错误。

【问题讨论】：

您使用的是 Express 4.16.1+，因此您不需要 body-parser，如下面的答案所述。 405错误是不允许的方法，你可以在浏览器的网络选项卡中仔细检查路径是否与Postman中的相同？
@SilviuBurcea 是的，实际上这是我一直在搞砸的主要事情。到目前为止，我了解到我的 Live Server 搞砸了端点。我设法提交了数据，它向我展示了我在 JSON 中添加的信息。唯一的问题是它仍然没有与我的 API 交互，所以没有任何东西被推送到数据库中。
@SilviuBurcea 我尝试返回 Postman 以确保 API 仍然有效。数据顺利通过并发布在我的数据库中。
浏览器网络显示调用了相同的 API 端点？
是的。我决定暂时以“action”的形式使用整个 localhost url。它可以作为临时修复。感谢您的帮助。

标签： javascript node.js mongodb api express

【解决方案1】：

看来代码应该是这样的：

var express = require('express')
var bodyParser = require('body-parser')

var app = express()

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

【讨论】：

当我尝试使用正文解析器时，它只是告诉我它已被弃用
我已经尝试过再次使用它，但我得到了相同的身体解析器弃用状态，说“'bodyParser' is deprecated.ts(6385)”并且提交仍然将我引导到正确的网址，但出现 http 405 错误。
@Rednirug 相关：stackoverflow.com/a/24330353/1051677
还发现了这个：medium.com/@mmajdanski/… 所以我认为你只需要将扩展设置为 false 并使用 express.json 和 express.urlencoded。
@SilviuBurcea 我使用的是 Express 4.17.1，这就是我使用 express.json() 和 express.urlencoded() 的原因，就像那篇文章最后所说的那样。我也尝试按照正文解析器的步骤进行操作，但 VS Code 只是在其中插入一行并告诉我它已被弃用。