Express中res.redirect()报错Cannot POST /的原因及优化方案

错误提示 #

Cannot POST /

你的代码 #

后端JS文件 #

const express =require("express");
const mongoose =require("mongoose");
const app=express();
const path=require("path")
const bodyparser= require("body-parser");
const Blog = require("./model/schema");
const { findById } = require("./model/schema");


app.use(express.static("public"));
app.set("views",path.join(__dirname+"/views"));
app.set("view engine","ejs");
app.use(bodyparser.urlencoded({extended:true}));


mongoose.connect("mongodb://127.0.0.1:27017/blogdb", {useNewUrlParser: true, useUnifiedTopology: true })
.then(()=>
{
    console.log("Connection successful!");
})
.catch(err=>
    {
        console.log("Error: connection failed")
    })

    app.get("/",async(req,res)=>
    {
      const blogs=await Blog.find({});
      //console.log(blogs);
      res.render("blogdata/show",{blogs});

    })
    
    app.get("/create",async(req,res)=>
    {
        // const id=req.params["id"];
        // const eblog= await Blog.findById(id);
        res.render("blogdata/form");
    })

    app.post("/create",async(req,res)=>
    {
      await Blog.insertMany([
        {name:req.body.author,blog:req.body.blogcontent}
      ])
      res.redirect("back");
        
    })

    app.listen(3000,()=>
{
    console.log("Server is up and running");
})

前端表单HTML #

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/formstyle.css">
    <meta charset="utf-8" />
    <title>create blog</title>
  </head>
  <body>
    <div><h1><b>Create your own blog!</b></h1></div>
    <div class="form">
    <form action="/create" method="post">
     <div class="name-in">   
       <label for="name">Author</label>
       <br>
   <input type="text" id="name" name="author" class="name" value="">
  </div >
    <div class="text-in">
   <label for="para">Enter your blog</label>
   <br>
   <textarea name="blogcontent" id="para" cols="30" rows="10"></textarea>
  </div>
  <button type="submit" class="form" id="btn">Submit</button>
   <!-- <label for="text">Edit your blog</label>
   <input name="text" id="text"
   type="text"
   class="blog"
 value= "" > -->
  </form>
</div>
  </body>
</html>

错误原因 #

1. 跳转逻辑错误：你使用了res.redirect("back")，该方法依赖请求头中的Referer字段确定跳转目标。如果Referer缺失（比如直接访问表单页面后提交），浏览器会默认用POST方法请求根路径/，但你的根路径只配置了GET路由，因此抛出Cannot POST /错误。
2. 需求匹配偏差：你实际需要提交后固定跳转到根路径，但误用了依赖上下文的back跳转，导致行为不可控。

优化实现方案 #

核心修改点 #

• 把res.redirect("back")替换为res.redirect("/")，直接指定跳转目标，避免依赖不稳定的Referer头。
• 数据库操作优化：单条数据插入用Blog.create()替代insertMany，语义更清晰。
• 添加错误捕获：异步操作包裹try/catch，避免服务器崩溃并给用户反馈。
• 简化中间件：Express内置express.urlencoded，无需单独安装body-parser。

修改后的后端代码 #

const express = require("express");
const mongoose = require("mongoose");
const app = express();
const path = require("path");
const Blog = require("./model/schema");

// 静态文件与模板配置
app.use(express.static("public"));
app.set("views", path.join(__dirname, "/views"));
app.set("view engine", "ejs");

// 替换body-parser为Express内置中间件
app.use(express.urlencoded({ extended: true }));

// 数据库连接
mongoose.connect("mongodb://127.0.0.1:27017/blogdb", { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => console.log("Connection successful!"))
  .catch(err => console.log("Error: connection failed", err));

// 根路径展示博客列表
app.get("/", async (req, res) => {
  try {
    const blogs = await Blog.find({});
    res.render("blogdata/show", { blogs });
  } catch (err) {
    res.status(500).send("加载博客列表失败，请稍后重试");
  }
});

// 渲染创建博客表单
app.get("/create", (req, res) => {
  res.render("blogdata/form");
});

// 处理博客提交
app.post("/create", async (req, res) => {
  try {
    // 单条数据插入用create更语义化
    await Blog.create({
      name: req.body.author,
      blog: req.body.blogcontent
    });
    // 固定跳转到根路径
    res.redirect("/");
  } catch (err) {
    console.error("插入博客失败:", err);
    res.status(500).send("提交博客失败，请检查内容后重试");
  }
});

app.listen(3000, () => console.log("Server is up and running"));

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