POST 请求未通过 (MERN)答案

【问题标题】：POST request not coming through (MERN)POST 请求未通过 (MERN)
【发布时间】：2020-05-29 03:24:54
【问题描述】：

我第一次使用 MERN 堆栈构建应用程序。

为了记录 HTTP 请求，我使用“morgan”。

我设法将数据发送到似乎工作正常的 mongodb。问题是我的帖子请求没有通过。它说“挂起” 4 分钟，然后失败。

这是我认为我的代码的相关部分：

“server.js”：

const express = require("express");
const mongoose = require("mongoose");
const morgan = require("morgan");
const path = require("path");
const cors = require("cors");

const app = express();

const PORT = process.env.PORT || 8080;

const routes = require("./routes/api");

const MONGODB_URI =
    "...";

mongoose.connect(MONGODB_URI || "mongodb://localhost/app", {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

mongoose.connection.on("connected", () => {
    console.log("Mongoose is connected.");
});

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

app.use(cors());

app.use(morgan("tiny"));

app.use("/api", routes);

app.listen(PORT, console.log(`Server is starting at ${PORT}`));

然后我将我的路线放入另一个文件“api.js”：

const express = require("express");

const router = express.Router();

const Lane = require("../models/lanes");

router.get("/", (req, res) => {
    Lane.find({})
        .then(data => {
            res.json(data);
            console.log("Get request successful!");
        })
        .catch(error => {
            console.log("Error: ", error);
        });
});

router.post("/save", (req, res) => {
    const data = req.body;
    const newLane = new Lane();
    newLane.collection.insertMany(data, err => {
        if (err) {
            console.log(err);
        } else {
            console.log("Multiple docs inserted");
        }
    });
});

module.exports = router;

我正在使用 axios 发送请求。在我的应用程序中提交表单后会发生这种情况。

减速器功能：

const reducer = (state, action) => {
    switch (action.type) {
        case "add":
            axios({
                url: "http://localhost:8080/api/save",
                method: "POST",
                data: [...state, { id: uuid(), title: action.title, tasks: [] }]
            })
                .then(() => {
                    console.log("Data has been sent to the server");
                })
                .catch(() => {
                    console.log("Internal server error");
                });
            return [...state, { id: uuid(), title: action.title, tasks: [] }];

我的上下文提供程序组件正在使用减速器，如下所示：

export function LanesProvider(props) {
    const [lanes, dispatch] = useReducer(reducer, defaultLanes);

    return (
        <LanesContext.Provider value={lanes}>
            <DispatchContext.Provider value={dispatch}>
                {props.children}
            </DispatchContext.Provider>
        </LanesContext.Provider>
    );
}

当在另一个组件中提交表单时，我的 reducer 中的“add”方法被调用。

如果我可以在我的问题中添加任何有帮助的内容，请告诉我。

提前谢谢你！

【问题讨论】：

如何在组件中调用这个？另外，这个组件是如何连接到redux的。？分享那段代码。
你在浏览器开发者工具网络标签中看到 3 个请求了吗？
@SuleymanSah 它说“待定”，所以我猜没有回复被发回，这就是它再次发送它的原因？ 4 分钟后失败，然后不再发送请求。
@SuleymanSah 不，老实说，我在处理 http 请求方面经验不足。我添加了更多代码。
你不应该在redux reducer中调用api。

标签： node.js reactjs express xmlhttprequest axios

【解决方案1】：

您没有向客户端发送任何响应。尝试修改 post 方法，如

router.post("/save", (req, res) => {
const data = req.body;
const newLane = new Lane();
newLane.collection.insertMany(data, err => {
    if (err) {
        console.log(err);
        res.send(err)
    } else {
        console.log("Multiple docs inserted");
        res.send("Multiple docs inserted")
    }
});
});

【讨论】：