Issue with fetching to server (Express) from Vue front-end with DELETE request method -- body (which is a string) isn't being recognised and shows as an empty object

In my file named app.ts, which is where all the Express code is, I have these middlewares and route handlers:app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(express.static(path.resolve(__dirname, '..', 'dist'))); app.use((req, res, next) => { res.setHeader( 'Access-Control-Allow-Origin', process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : '/' // "http://localhost:3000" is the Vue dev server ); res.setHeader('Access-Control-Allow-Methods', ['GET', 'OPTIONS', 'DELETE']); next(); }); app .route('/data') .get(async (req, res) => { utils.data .getAll() .then(data => { res .status(200) .type('json') .send(JSON.stringify(data)) .end(); }) .catch(err => { res .status(500) .type('text/plain') .send(err) .end(); }); }) .delete(async (req, res) => { const r = await req.body; console.log(r); res.status(200).end(); }); GET requests work as expected for /data but when I make a DELETE request r is just an empty object when it should be a particular string. I've console.log'd the req parameter but am not sure where to begin looking to figure out my issue. The fetch() call with the DELETE method is as follows:fetch(`${props.site.serverHost}/data`, { method: 'DELETE', body: this.date }).catch(err => console.error(err)); where props.site.serverHost is the Express server. Does anybody know what I am missing which explains why the request's body is not being recognised? Thanks /r/node.

Submitted March 24, 2020 at 02:08PM by realKeirStarmer