前端通过Fetch发送POST请求，后端Express的req.body为undefined如何解决？

问题原因 #

Express 中间件按注册顺序依次执行，你当前的服务端代码中，hubRoutes 路由的注册顺序早于 express.json()、express.urlencoded() 这两个请求体解析中间件。当请求匹配到 /addProblem 路由时，还没有经过解析中间件处理，请求体没有被挂载到 req.body 上，因此访问时会返回 undefined。

修复方案 #

调整服务端代码的中间件注册顺序，将请求体解析、静态资源服务中间件放到路由注册之前：

//native node modules
const path = require("path");

//external node modules
const express = require("express");
const mongoose = require("mongoose");

const app = express();

const MONGODB_URI =  "hello world";

app.set("view engine", "ejs");
app.set("views", "views");

// 先注册请求解析、静态资源中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, "public")));

// 再注册路由
const hubRoutes = require("./routes/hub");
app.use(hubRoutes);

mongoose.connect(MONGODB_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  })
  .then(result => {
    app.listen(3000, () => {
      console.log("server started on port 3000");
    });
  })
  .catch((err) => {
    console.log(err);
  });

额外注意事项 #

你当前前端使用 fetch 发送POST请求后，服务端返回了重定向响应，fetch 默认不会自动跟随重定向，如果需要前端自动跳转，可以在fetch的请求配置中添加 redirect: 'follow' 参数。

内容的提问来源于stack exchange，提问作者dewesh jha