Cannot Delete and getting 404 not found error in router.delete

In my application, i am passing the request param id in router.delete and communicating that with vuex service. While triggering action api is fired but getting 404 not found and there is not request payload as well.

Express route.delete

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

Vuex service

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

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

vuex actions

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

component action trigger

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

It is showing in api response

server.js

    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);
});

Answer

Since your api endpoint is this: '/favorites/:favoriteId', You have to app favoriteId at the end of the request url not in the body. so your request have to be like this:

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

}

Advertisement

Answer