javascript - 尝试从客户端访问 Node/Express 端点时出现 404 Not Found

Question

我有一个 Node.js/Express REST API，可供前端 React 应用程序访问，用于库存管理系统，用于车库销售。当尝试添加新产品时，我尝试访问 POST 路由 http://localhost:3001/api/new。然而，当我尝试访问它时，它会返回 404 Not Found 错误，尽管我确信我已经完成了让服务器可以看到路由所需的操作，以便客户端能够获取它。有人能告诉我我可能会错过什么吗？

从客户端访问端点:

const addNewItemHandler = async () => {
    setIsLoading(true);
        
    const REQUEST_BASE_URL = "http://localhost:3001";
    const REQUEST_ROUTE    = "/api/new";
    const REQUEST_URL      = `${REQUEST_BASE_URL}${REQUEST_ROUTE}`;

    const REQUEST_CONFIG = {
        method: "POST",
        body: JSON.stringify({
            "productID": productID,
            "name": productName,
            "quantity": quantity,
            "price": parseFloat(`${priceDollar}.${priceCents.split("")[0]}${priceCents.split("")[1]}`)
        }),
        headers: {
            'Content-Type': 'application/json'
        }
    };

    try {
        await fetch(REQUEST_URL, REQUEST_CONFIG);
        setIsLoading(false);

        const currentItems = JSON.parse(localStorage.getItem('all-items'));
        const newItem = {
            id: productID,
            title: productName,
            quantity: quantity,
            price: parseFloat(`${priceDollar}.${priceCents.split("")[0]}${priceCents.split("")[1]}`)
        };

        localStorage.setItem('all-items', JSON.stringify([...currentItems, newItem]));

        history.push('/');
    } catch (err) {
        console.error(err);
        setIsLoading(false);
    }
};

服务器.js:

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const sequelize = require('./db-config');
const apiRoutes = require('./routes/APIRoutes');

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

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

app.use('/api', apiRoutes);

sequelize.sync().then(result => {
    app.listen(3001, console.log("Staring on port 3001"));
}).catch(error => {
    console.error(error);
});

---

APIRoutes.js

const express = require('express');
const router = express.Router();
const controller = require('../controller/Controller');

router.get('/all-items', controller.allitems);
router.get('/search/:term', controller.search);
router.get('/summary', controller.viewSummary);

router.post('/api/new', controller.createNewProduct);

router.patch('/sell-item', controller.sellProduct);

router.delete('/delete-all', controller.deleteAllProducts);
router.delete('/delete/:id', controller.deleteProduct);

module.exports = router;

---

Controller .js

const Sequelize = require('sequelize');
const Product = require('../models/Product');
const SoldProduct = require('../models/SoldProduct');
const Op = Sequelize.Op;

const allItems = (request, response) => {
    // ...
};

const search = (request, response) => {
    // ...
};

const viewSummary = (request, response) => {
    // ...
};

const createNewProduct = (request, response) => {
    const { productID, name, quantity, price } = request.body;

    Product.create({
        productID: productID,
        name: name,
        quantity: quantity,
        price: price
    }).then(() => {
        response.json({ message: "Successfully created a new product" });
    }).catch(error => {
        response.json({ message: "Something went wrong" });
    });
};

const sellProduct = (request, response) => {
    // ...
};

const deleteAllProducts = (request, response) => {
    // ...
};

const deleteProduct = (request, response) => {
    // ...
};

exports.allitems          = allItems;
exports.search            = search;
exports.viewSummary       = viewSummary;
exports.createNewProduct  = createNewProduct;
exports.sellProduct       = sellProduct;
exports.deleteAllProducts = deleteAllProducts;
exports.deleteProduct     = deleteProduct;

Answer 1

在server.js文件中，将APIRoutes.js文件中的所有路由挂载到/api路径:

app.use('/api', apiRoutes);

使用此配置，URL 应为:http://localhost:3001/api/api/new。

您可以将您的路由挂载到 '/' 路径，然后您就可以像以前一样访问您的路由。

app.use('/', apiRoutes);

或者在 APIRoute.js 文件中，将 /api/new 更改为 /new

router.post('/new', controller.createNewProduct);