Node.js/Express提交表单提示cannot POST /submit错误排查

三个核心问题导致POST路由匹配失败：

• 启动逻辑顺序错误：你把app.listen()放在了所有中间件、路由注册代码的最前面。Heroku这类PaaS平台会在端口监听启动的瞬间发起健康检查和流量转发，虽然本地开发时Node.js单线程模型会在同步代码执行完成后才处理请求，但部分版本Express在端口监听触发时会做路由表快照，后续注册的路由不会被加载，直接导致POST路由不存在。
• 表单解析中间件配置缺失：express.urlencoded()在Express 4.x全版本中都要求显式传入extended配置参数，缺省状态下部分版本会直接中断请求链路，请求不会传递到后续路由。
• 静态资源托管规则有冲突：你直接将项目根目录设置为静态资源目录，只要根目录下存在名为submit的文件、文件夹，静态资源中间件就会优先拦截/submit路径的请求，非GET/HEAD请求直接返回404，不会进入路由匹配逻辑。

• 调整代码执行顺序：所有中间件、路由全部注册完成后，再调用app.listen()启动服务。
• 补全body解析中间件配置，给express.urlencoded()传入{ extended: true }参数。
• 调整静态资源托管范围，新建public目录存放所有前端静态文件（html、js、css、前端资源），不要直接托管整个项目根目录，从根源避免路径冲突。
• 重新部署前清理Heroku构建缓存，避免旧代码缓存影响。

index.js #

const express = require("express");
const path = require("path");
const PORT = process.env.PORT || 5000;
const app = express();

// 静态资源托管：只托管public目录
app.use(express.static(path.join(__dirname, "public")));
// body解析中间件
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 路由注册
app.post("/submit", (req, res) => {
  // 可以放开注释查看表单提交数据
  // console.log(req.body);
  res.send("hi");
});

app.get("/", (req, res) => {
  res.sendFile("./html/index.html", { root: path.join(__dirname, "public") });
});

// 所有逻辑初始化完成后再启动端口监听
app.listen(PORT, () => console.log(`Listening on ${PORT}`));

目录调整 #

把原有的html文件、render.js、前端静态资源全部移动到public目录下，调整后目录结构参考：

项目根目录
├── index.js
├── package.json
└── public
    ├── render.js
    └── html
        └── index.html

调整后index.html里的静态资源引用路径同步修改，原../render.js改为/render.js即可，其他bootstrap、jQuery的CDN引用不需要改动。

• 本地运行代码，访问http://localhost:5000 点击提交按钮，确认能正常收到'hi'响应。
• 部署到Heroku前先执行命令清理缓存：heroku plugins:install heroku-repo && heroku repo:purge_cache -a 你的Heroku应用名
• 部署完成后查看Heroku日志无报错，再测试表单提交即可。

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