Javascript 无法删除和获取路由器中的404未找到错误。删除

在我的应用程序中，我正在router.delete中传递请求参数id，并与vuex服务进行通信。虽然触发了动作api，但找不到404，也没有请求负载

快速路线。删除

    router.delete('/favorites/:favoriteId', (req, res) => {
    res.status(200).send(Number(req.params.favoriteId));
  });

 /**
 *
 * @param {*} favouriteId number
 */

export async function deleteUserFavourites(favouriteId) {
    const response = await http.delete('favorites',favouriteId);
    return response;
}

Vuex服务

    router.delete('/favorites/:favoriteId', (req, res) => {
    res.status(200).send(Number(req.params.favoriteId));
  });

 /**
 *
 * @param {*} favouriteId number
 */

export async function deleteUserFavourites(favouriteId) {
    const response = await http.delete('favorites',favouriteId);
    return response;
}

vuex操作

async removeFavorites({ commit }, payload) {
    const favourites = await service.deleteUserFavourites({
        id: payload.favouriteId
    });
    commit('removeFavorites', favourites);
},

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

// Express Server Setup
const server = express();
server.use(express.json());
server.use(express.urlencoded({ extended: true }));
server.use(express.static('public'));

// Webpack HMR
const webpackConfig = require('./webpack.config.local');
const compiler = webpack(webpackConfig);
const webpackDevMiddleware = require('webpack-dev-middleware')(
    compiler,
    webpackConfig.devServer
);
const webpackHotMiddleware = require('webpack-hot-middleware')(compiler);
server.use(webpackDevMiddleware);
server.use(webpackHotMiddleware);

// Server Startup
server.listen(3000, () => {
    console.log('*****************************************');
    console.log('*****************************************');
    console.log('** Server is listening at PORT 3000. ****');
    console.log('** http://localhost:3000/      ****');
    console.log('*****************************************');
    console.log('*****************************************');
});

// Mock APIs
const router = require('express').Router();
const routesPath = path.join(__dirname, './routes');
const filenames = fs.readdirSync(routesPath);
filenames.forEach(file => {
    if (file.endsWith('.js')) {
        console.log(`route ${file} loaded`);
        router.use('/', require(path.join(routesPath, file)));
    }
});
server.use('/api', router);

// Vue entrypoint
const template = require('./template');
server.get('/**', (req, res) => {
    const page = template();
    res.header('Content-Type', 'text/html').send(page);
});

组件动作触发器

async handleListClick(item) {
            console.log(item.id);
            await this.removeFavorites({
                id: item.id
            });
        }
    }

它显示在api响应中

    router.delete('/favorites/:favoriteId', (req, res) => {
    res.status(200).send(Number(req.params.favoriteId));
  });

 /**
 *
 * @param {*} favouriteId number
 */

export async function deleteUserFavourites(favouriteId) {
    const response = await http.delete('favorites',favouriteId);
    return response;
}

server.js

async removeFavorites({ commit }, payload) {
    const favourites = await service.deleteUserFavourites({
        id: payload.favouriteId
    });
    commit('removeFavorites', favourites);
},

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

// Express Server Setup
const server = express();
server.use(express.json());
server.use(express.urlencoded({ extended: true }));
server.use(express.static('public'));

// Webpack HMR
const webpackConfig = require('./webpack.config.local');
const compiler = webpack(webpackConfig);
const webpackDevMiddleware = require('webpack-dev-middleware')(
    compiler,
    webpackConfig.devServer
);
const webpackHotMiddleware = require('webpack-hot-middleware')(compiler);
server.use(webpackDevMiddleware);
server.use(webpackHotMiddleware);

// Server Startup
server.listen(3000, () => {
    console.log('*****************************************');
    console.log('*****************************************');
    console.log('** Server is listening at PORT 3000. ****');
    console.log('** http://localhost:3000/      ****');
    console.log('*****************************************');
    console.log('*****************************************');
});

// Mock APIs
const router = require('express').Router();
const routesPath = path.join(__dirname, './routes');
const filenames = fs.readdirSync(routesPath);
filenames.forEach(file => {
    if (file.endsWith('.js')) {
        console.log(`route ${file} loaded`);
        router.use('/', require(path.join(routesPath, file)));
    }
});
server.use('/api', router);

// Vue entrypoint
const template = require('./template');
server.get('/**', (req, res) => {
    const page = template();
    res.header('Content-Type', 'text/html').send(page);
});

---

由于您的api端点是：

“/favorites/：favoriteId”

，因此必须在请求url的末尾而不是正文中应用favoriteId。 因此，您的请求必须如下所示：

export async function deleteUserFavourites(favouriteId) {
const response = await http.delete('favorites/' + favoriteId.toString());
return response;

---

}

您还可以显示标题选项卡屏幕截图吗？具体而言，请求的URL？Id未通过。。它是否不理解请求参数？？

consloe.log（favoriteId）

正上方的

const response=wait http.delete（'favorites'，favoriteId）并查看您得到了什么。如果id不存在，请开始向上工作，并尝试查明问题的根源。直到服务和操作正确沟通。我得到了最喜欢的东西。问题是route.delete未正确设置路由。请求的url:localhost:3000/api/FavoriteSounds好像您没有在后端设置
DELETE
路由。