部署MEAN应用至Heroku时遭遇POST 404及GET 503错误求助

Hey Matt, let's work through those errors you're facing—they're fixable with a couple of key adjustments!

First: Fix the 404 Error on POST /api/books/ #

Looking at your server.js code, I spotted a route mismatch. Your frontend is sending a POST request to /api/books/, but your backend's book creation route is defined as /api/book (singular, missing the final "s"). That's why you're getting a 404—there's no route listening for the plural path your frontend is using.

Update this route from:

app.post('/api/book', function(req, res){
  let book = req.body;
  Book.addBook(book, function(err, book){
    if(err){
      throw err;
    }
    res.json(book);
  });
});

To:

app.post('/api/books', function(req, res){
  let book = req.body;
  Book.addBook(book, function(err, book){
    if(err){
      throw err;
    }
    res.json(book);
  });
});

This matches the plural path your frontend is targeting and keeps consistency with your other book routes (like /api/books/:_id).

Second: Fix the Mongoose Database Connection (Causing 503 Errors) #

Right now, you're using the native MongoDB Node.js client to connect to your database, but your Genre and Book models are built with Mongoose. Mongoose requires its own connection setup to work properly—using the native client won't link your Mongoose models to the database, which leads to failed database operations and the 503 "Service Unavailable" error.

Replace your entire database connection block with this Mongoose-based setup:

// Connect to Mongoose
mongoose.connect(process.env.MONGODB_URI || "mongodb://localhost:27017/test")
  .then(() => {
    console.log("Database connection ready");
    
    // Move all your routes and server startup code inside this .then block
    app.get('/', function(req, res){
      res.send('Please use /api/books or /api/genres');
    });

    // --- Genre Routes ---
    app.get('/api/genres', function(req, res){
      Genre.getGenres(function(err, genres){
        if(err){ throw err; }
        res.json(genres);
      });
    });

    app.post('/api/genres', function(req, res){
      let genre = req.body;
      Genre.addGenre(genre, function(err, genre){
        if(err){ throw err; }
        res.json(genre);
      });
    });

    // ... keep all your other genre and book routes here ...

    // Start the server
    var server = app.listen(process.env.PORT || 8080, function () {
      var port = server.address().port;
      console.log("App now running on port", port);
    });
  })
  .catch(err => {
    console.log(err);
    process.exit(1);
  });

This ensures Mongoose is properly connected to your database, so your model methods (like Book.addBook) can execute without errors.

Third: Handle Unhandled Rejections (Optional but Recommended) #

The "Possibly unhandled rejection" warning comes from your frontend code not catching errors in its Promise-based API calls. Once you fix the backend issues, you can add a .catch() block to your frontend's POST request for adding books to handle any remaining errors gracefully.

After making these changes, redeploy your app to Heroku and test the "New Book" feature again. Those errors should be resolved!

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