I have a small side project I work on and off on, and I've taken the dive into Express, which I'm not familiar with, as a backend for it. For some reason, when I use my DELETE route instead of a POST, the body isn't passed.
api.js
is my small fetch library I use to make the requests:
import store from '@/store';
// API headers
const HEADERS = {
ALIAS: 'X-Organization-Alias',
AUTH: 'Authorization',
CACHE: 'Cache-Control',
ACCEPT: 'Accept',
CONTENT: 'Content-Type',
};
// HTTP codes
const CODES = {
AUTH_REQUIRED: 401,
};
const api = {
call: (method, url, input) => {
let path = `${store.state.endpoint}/${url}`;
return fetch(path, {
method,
// https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
mode: 'cors',
credentials: 'omit',
headers: {
[HEADERS.ALIAS]: 'web-client',
[HEADERS.CACHE]: 'no-cache',
[HEADERS.ACCEPT]: 'application/json',
[HEADERS.CONTENT]: 'application/json',
},
body: method === 'POST' || method === 'PATCH' ? JSON.stringify(input) : null,
})
.then((response) => {
if (!response.ok) {
switch (response.status) {
// Authorization requests do a hard refresh to the login page rather than route
// This is so that any state is safely purged
case CODES.AUTH_REQUIRED:
document.location.href = '/login';
break;
default:
console.log(response)
// TODO create error dialog/toast
}
throw new Error();
}
return response;
})
.then((response) => response.json())
},
get: (url, input) => api.call('GET', url, input),
post: (url, input) => api.call('POST', url, input),
patch: (url, input) => api.call('PATCH', url, input),
delete: (url, input) => api.call('DELETE', url, input)
}
export default api;
I make a request like:
api.delete('arena/entry', { arena_history_id: arena_history_id })
.then(response => {
if (response) {
this.saved_arenas = response;
}
})
And an empty object in req.body on the express route:
OPTIONS /arena/entry 200 2.435 ms - 20
{}
DELETE /arena/entry 200 2.488 ms - 29
If I change the request to:
api.post('arena/entry', { arena_history_id: arena_history_id })
.then(response => {
if (response) {
this.saved_arenas = response;
}
})
I correctly receive:
OPTIONS /arena/entry 200 2.353 ms - 20
{ arena_history_id: 13 }
POST /arena/entry 200 12.631 ms - 29
What in the heck is going on?