So, I've created a API and I've got my POST and GET requests working, but I'm can't get the DELETE request to work. I keep getting a 'DELETE http://localhost:3000/api 400 (Bad Request)' error in the console.
Here is the delete section in my server file:
app.delete('/api', (request, response) => {
database.remove({ _id: request }, {}, function(err, numRemoved) {});
});
Here is the button that executes the DELETE:
document.body.addEventListener('click', function(event) {
if (event.target.id == uid) {
const options = {
method: 'DELETE',
headers: {
'Content-Type': 'application/json'
},
body: uid
};
fetch('/api', options);
};
});
It says that the bad request comes from fetch('/api', options);, but I have no idea how to fix it! Can anyone help me?
I feel this might stem from a misconception of what the DELETE request is for.
The main goal of the DELETE method is to delete the resource at the uri. For example, a DELETE on /article/123 deletes the resource at /article/123, and it means that a future GET request at that location should result in a 404 or 410.
It never makes sense to have a body in a DELETE request, because if the purpose of the request is to remove the resource at the URI, nothing in the body really further modifies the meaning of the request. HTTP dictates that DELETE (and GET and others) shouldn't have a body.
So the request you are making is DELETE /api, which means"delete the /api resource". The body is irrelevant (and causes your error).
It looks like you are going for more of an RPC-style API. If you only use a /api endpoint, you should probably forget about all the methods and only use POST. You're not really doing REST.
If you do want to apply more design and use appropriate HTTP methods, you should start by thinking about how your routes are structured. Remember that the method describes what kind of operation you are doing, and the URI describes what you are doing that operation on. People who design their API to go through a single endpoint (such as with GraphQL and SOAP) effectively use HTTP as a 'tunnel' for their own protocol.
I cannot see where uid is set. However, based on your error message, I assume that uid is not a valid JSON object. You could place uid into an object like { uid }. Then, read the object in your route handler with request.body.uid.
Also, in a traditional REST API a DELETE request does not have a body. Instead, your route would be in the format of /api/:id. Your request url would then need to be updated to be "/api/" + uid. You can then read the request parameter in your route handler with req.params.id.
The error may be due to the fact that delete request should not receive a json body, you should pass the uid as a path variable like:
app.delete('/api/:uid', (request, response) => {
const uid = request.params.uid;
database.remove({ _id: uid }, {}, function(err, numRemoved) {});
});
And change your call to:
document.body.addEventListener('click', function(event) {
if (event.target.id == uid) {
const options = {
method: 'DELETE',
};
const endpoint = `/api/${uid}`;
fetch(endpoint, options);
};
});