Within my application, I am passing the request parameter 'id' in the router.delete method and communicating it with the Vuex service. However, when triggering the action, an API call is made but it results in a 404 error indicating "not found" and there is no request payload being sent.
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
});
}
}
The issue manifests in the 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);
});