Express 服务器未收到 Fetch POST 请求正文

Question

所以我正在开发一个 React 应用程序，并设置了一个简单的 Express API 来将用户的详细信息添加到数据库中

    app.post("/register", jsonParser, (req, res) => {
    console.log("body is ", req.body);
    let { username, firstname, lastname, password, role, className } = req.body;
    password = MD5(password);
    console.log(className);
    const query = `INSERT INTO users VALUES ('${username}', '${firstname}', '${lastname}', '${password}', '${role}', '${className}')`;
    conn.query(query, (err, res) => {
        if (err) throw err;
        console.log("Registered Successfully");
    });
});

我正在通过 Fetch API 发送 POST 请求

const response = fetch("http://localhost:8000/register", {
                                            method: "POST",
                                            mode: "no-cors",
                                            body: JSON.stringify({
                                                "username": username2,
                                                "firstname": firstname2,
                                                "lastname": lastname2,
                                                "password": password2,
                                                "role": "student",
                                                "className": "A1",
                                            }),
                                        })
                                            .then((response) => {
                                                console.log(response);
                                            })
                                            .catch((err) => {
                                                console.log(err);
                                            });

触发获取请求后，我在运行服务器的终端上收到以下内容

body is  {}

这会导致代码进一步出错

我做错了什么？

Answer 1

不清楚

jsonParser

是什么，但我们假设它是

express.json()

的返回值。

该中间件使用

Content-Type

请求标头来确定是否应该解析请求正文。

由于您传递

fetch

string 作为请求正文，并且 not 显式设置

Content-Type

标头，因此它将声称它正在发送

text/plain

数据，因此 JSON 正文解析器将忽略它。

请注意，您无法将

Content-Type

标头设置为

enctype

不支持的任何值而不触发预检，并且您无法在

mode: "no-cors"

中发送预检（并且您无法在该模式下读取响应）任一）。

---

const response = fetch("http://localhost:8000/register", {
    method: "POST",
    headers: {
        "content-type": "application/json"
    },
    body: JSON.stringify({
        "username": username2,
        "firstname": firstname2,
        "lastname": lastname2,
        "password": password2,
        "role": "student",
        "className": "A1",
    })
})

在服务器上使用cors中间件来支持跨域请求。确保您以支持预检请求的方式进行操作。