POST localhost:8080/提交的 404 未找到

Question

我一直在尝试从 express 连接到 mongodb，但似乎无法克服错误 POST http://localhost:8080/提交的 404（未找到）

我也尝试将 app.post 函数放在索引路由器下，然后错误变为 500 Internal Server Error。

index.hbs

<h1>{{title}}</h1>
<input type="text" name="username" id="username" placeholder="Username">
<button id="submit">Convert</button>
<div id="map"></div>
<div id="info"></div>
<script src="javascripts/client.js"></script>

app.js

var createError = require('http-errors');
var express = require('express');
const mongodb = require("mongodb");
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

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

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

app.listen(8080, () => {
  console.log('listening on 8080');
});

let db;

const uri = "mongodb+srv://gio:<password>@<cluster>/db?retryWrites=true&w=majority";
const client = mongodb.MongoClient;

client.connect(uri, (err, client) => {
  if(err) {
    return console.log(err);
  }
  db = client.db('db');
});

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// 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;

app.post('/submitted', (req, res) => {
  if (err) {
      return console.log(err);
    }
  let validUsers = db.collection('users').find({
    currentLocation: {$ne: null}
  });
  console.log(validUsers.currentLocation);
});

client.js

const submit = document.getElementById('submit');
submit.addEventListener('click', function(e) {
  console.log('test');

  fetch('submitted', {method: 'POST'})
    .then(function(response) {
      if (response.ok) {
        console.log('success');
        return;
      }
      throw new Error('Request failed');
    })
    .catch(function(error) {
      console.log(error);
    });
})

这是我将 POST 函数作为 router.post 放入的 index.js 文件 我也有下面更改的 app.js。

index.js

var express = require('express');
const mongodb = require("mongodb");
var router = express.Router();

let db;

const uri = "mongodb+srv://gio:<password>@<cluster>/db?retryWrites=true&w=majority";
const client = mongodb.MongoClient;

client.connect(uri, (err, client) => {
  if(err) {
    return console.log(err);
  }
  db = client.db('db');
});

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Converter' });
});

router.post('/submitted', (req, res) => {
  if (err) {
      return console.log(err);
    }
  let validUsers = db.collection('users').find({
    currentLocation: {$ne: null}
  });
  console.log(validUsers.currentLocation);
});

module.exports = router;

app.js

var createError = require('http-errors');
var express = require('express');
const mongodb = require("mongodb");
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

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

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/submitted', indexRouter)
app.use('/users', usersRouter);

app.listen(8080, () => {
  console.log('listening on 8080');
});

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// 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;

我应该注意，对具有占位符的 uri 字符串的更改仅适用于 stackoverflow，所以这不是错误（我认为）。

Answer 1

这行会导致问题。

app.use('/submitted', indexRouter); // remove this line

这行说如果路由是 /submitted 检查 indexRouter。但是你有

router.post('/submitted', (req, res) => {
  if (err) {
      return console.log(err);
    }
  let validUsers = db.collection('users').find({
    currentLocation: {$ne: null}
  });
  console.log(validUsers.currentLocation);
});

因此，您需要 /submitted/submitted 才能访问它。

删除此行，它应该可以工作。

你定义它的方式，你必须用：http://localhost:8080/submitted/submitted 来调用它