我的快速解析设置有什么问题？答案

【问题标题】：What is wrong with my express parse setup?我的快速解析设置有什么问题？
【发布时间】：2020-08-19 02:04:58
【问题描述】：

服务器

const express = require("express");
const app = express();

app.listen(4000, () => console.log("listening at 4000"));
app.use(express.static("public"));
app.use(express.json({limit: "1mb"})); 


//POST method route
app.post("/clientApi", (req, res) => {
  // res.send("POST request to the homepage")
  console.log(req.body);
});

客户

function checkData() {
    let summoner = playerName.value;

    let fetchData = {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(summoner),
    }

    fetch("/clientApi", fetchData)
    .then(response => response.json())
    .then(data => {
        console.log("Success: ", data);
    });   
}

在我尝试调用 Express.json 之前一切正常，但我没有看到任何语法错误。客户端可以向服务器发送数据。但是数据太多了，所以我使用“req.body”来尝试得到我想要的东西，但在终端上它是未定义的。所以那是我决定尝试使用 express.json 时出现错误的地方。

错误信息

未捕获（承诺中）SyntaxError：JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符

【问题讨论】：

标签： javascript node.js express

【解决方案1】：

您忘记了应该修复它的 app.listen(4000, () => {console.log("listening at 4000")}); 之后的 {}

【讨论】：

听不应该是最后一个
不幸的是，这两者都不是问题。

【解决方案2】：

实际上你忘了在客户端生成正确的 JSON 格式：

function checkData() {
let summoner = playerName.value;
let sendData = {};
sendData.summoner = summoner;

let fetchData = {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(sendData),
}

fetch("/clientApi", fetchData)
.then(response => response.json())
.then(data => {
    console.log("Success: ", data);
});

}

注意：您在 JSON.stringify() 中传递的数据应该是正确的 JSON 对象。这样它就可以在另一边解析。

【讨论】：

是的，这就是问题所在。

【解决方案3】：

尝试发送一个对象，而不仅仅是一个字符串化的字符串，例如

<script>
    const playerName = {
        value: "foobar"
    };

    function checkData() {
        const summoner = { ...playerName };

        const fetchData = {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(summoner),
        }

        fetch("/clientApi", fetchData)
            .then(response => response.json())
            .then(data => {
                console.log("Success: ", data);
            });
    }

    checkData();
</script>

否则 Express 将无法对其进行解码。

【讨论】：

【解决方案4】：

fetch("/clientApi", fetchData) 不应该包含http://localhost:4000/clientApi吗？

【讨论】：

也许我可以把它说出来，但这不是问题所在。就像我在解释中所说的那样，客户端的 fetch() 发送数据就好了。它的服务器代码 express.json 我需要弄清楚出了什么问题，以便它可以解析数据。
如果你尝试从客户端调用它，你添加了CORS吗？