Why does Fetch post method is giving a 404 error

Question

I'm creating a virtual store as part of my Bootcamp projects and ran into this problem when trying to get the confirmation page from the cart page using the fetch post method I get a 404 error. Not sure if it's a server issue or my code.

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify({
  "firstName": "kk",
  "lastName": "41k421k",
  "address": "14125415",
  "city": "541521",
  "email": "515k215",
  "products": [
    "107fb5b75607497b96722bda5b504926"
  ]
});
var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
  redirect: 'follow'
};
fetch("http://localhost:3000/api/order", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

// product.js (routes)

 const express = require('express');
    const router = express.Router();
    const productCtrl = require('../controllers/product');
    router.get('/', productCtrl.getAllProducts);
    router.get('/:id', productCtrl.getOneProduct);
    router.post('/order', productCtrl.orderProducts);
    module.exports = router;

// app.js

const express = require('express');
const path = require('path');

const productRoutes = require('./routes/product');

const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  next();
});

app.use('/images', express.static(path.join(__dirname, 'images')));
app.use(express.static('images'));

app.use(express.urlencoded({extended: true}));
app.use(express.json());

app.use('/api/products', productRoutes);

module.exports = app;

// product.js (controller)

exports.orderProducts = (req, res, next) => {
if (!req.body.contact ||
!req.body.contact.firstName ||
!req.body.contact.lastName ||
!req.body.contact.address ||
!req.body.contact.city ||
!req.body.contact.email ||
!req.body.products) {
return res.status(400).send(new Error('Bad request!'));
}
let queries = [];
for (let productId of req.body.products) {
const queryPromise = new Promise((resolve, reject) => {
Product.findById(productId).then(
(product) => {
if (!product) {
reject('Product not found: ' + productId);
}
product.imageUrl = req.protocol + '://' + req.get('host') + '/images/' + product.imageUrl;
resolve(product);
}
).catch(
() => {
reject('Database error!');
}
)
});
queries.push(queryPromise);
}

Answer 1

The request URL and the URLs in the server code don't match.

The request is sent to http://localhost:3000/api/order but the server is listening for the post request at http://localhost:3000/api/products/order.

Change the fetch request to

fetch("http://localhost:3000/api/products/order", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));