Javascript 使用nodejs和express不断获取404错误

我试图从本地主机上运行的网页（收集用户信息的注册表）收集数据，但当我按下提交按钮时，我得到一个

404错误：找不到页面，表单中的数据未被收集和输出

我将webstorm与

node.js

和express一起使用，我希望使用body解析器收集和解析注册页面中的用户输入。这些代码中有很多已经存在于预制的Nodejs Express应用程序项目中

这是我的app.js文件：

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var registration = require('./routes/registration');

var app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: true });

module.exports = app;

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/registration', registration);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
   var err = new Error('Not Found');
   err.status = 404;
   next(err);
});

// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page
res.status(err.status || 500);
res.render('error');
});

app.get('/', function(req, res) {
  res.render('index');
});

app.get('/registration', function(req, res) {
  res.render('registration', {qs: req.query});
});

app.post('/registration', urlencodedParser, function(req, res) {
  console.log(req.body);
  res.render('registration', {qs: req.query});
});     

当服务器运行时，我可以在网页上看到表单，我可以输入信息，但当我点击提交按钮时，它会转到

404错误：找不到页面

，并且信息不会打印到我的控制台日志中

我不确定问题出在哪里，因为在我添加

app.get

行之前，我能够输入信息并提交表单（尽管它没有做任何事情-只是刷新到一个新的空白表单）

我遵循了本教程：

这是html文件的一部分：

<form id="registration-info" method="POST" action="/registration">
<div class="container">
    <div class="py-5 text-center”>
        <h2>Registration Form</h2>

    <div class="row justify-content-center">

        <div class="col-md-8 order-md-1">
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label for="firstName">First name</label>
                    <input type="text" class="form-control" value="" required>
                    <div class="invalid-feedback">
                        Valid first name is required.
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <label for="lastName">Last name</label>
                    <input type="text" class="form-control" value="" required>
                    <div class="invalid-feedback">
                        Valid last name is required.
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-5 mb-3">
                    <label for="birthmonth">Birthday</label>
                    <select class="custom-select d-block w-100" required>
                        <option value="">Month</option>
                        <option>January</option>
                        <option>February</option>
                        <option>March</option>
                        <option>April</option>
                        <option>May</option>
                        <option>June</option>
                        <option>July</option>
                        <option>August</option>
                        <option>September</option>
                        <option>October</option>
                        <option>November</option>
                        <option>December</option>
                    </select>
                    <div class="invalid-feedback">
                        Please select a valid month.
                    </div>
                </div>

                <div class="col-md-4 mb-3">
                    <label for="birthday">Day</label>
                    <input type="text" class="form-control" required>
                    <div class="invalid-feedback">
                        Day is required.
                    </div>

                </div>
                <div class="col-md-3 mb-3">
                    <label for="birthyear">Year</label>
                    <input type="text" class="form-control" required>
                    <div class="invalid-feedback">
                        Year is required.
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label for="password">Password</label>
                <input type="password" class="form-control" >
                <div class="invalid-feedback">
                    Please enter a password.
                </div>
            </div>

            <hr class="mb-4">
            <button class="btn btn-primary btn-lg btn-block" type="submit">Submit</button>
        </div>
    </div>
</div>

在检查路由之前，您正在处理错误。所以它总是会出现404错误

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

// var index = require('./routes/index');
// var registration = require('./routes/registration');

var app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: true });

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// app.use('/', index);
// app.use('/registration', registration);

app.get('/', function(req, res) {
  res.render('index');
});

app.get('/registration', function(req, res) {
  res.render('registration', {qs: req.query});
});

app.post('/registration', urlencodedParser, function(req, res) {
  console.log(req.body);
  res.render('registration', {qs: req.query});
});

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

除了Nitin Goyal的答案之外，express中间件的顺序也很重要。因为在应用程序中，您在其他中间件之前定义了错误中间件（错误中间件总是有四个参数err、res、req、next）

当express中发生错误时（当使用参数调用next时，通常是
newerror
），express会查找下一个错误中间件。然后，您可以通过调用
next（）
而无需参数退出此错误中间件。现在express寻找下一个正常的（带有2-3个参数）中间件，并跳过所有错误中间件（带有4个参数）

很好地解释了这一点。
您是否尝试过在
app.post（“/registration”）
之后添加错误处理程序？这修复了404错误，谢谢！仍然存在输出未打印到控制台的问题，因此我也发布了html文件。