While testing my HTTP delete request in Postman, everything ran smoothly. However, when I attempted to test it in the browser, I encountered a 'Cannot GET /account/delete/Julieth' error. To address this issue, I modified the method to GET, which resolved the problem in both environments. Yet, I am puzzled as to why the DELETE method is not recognized by the browser. Are there specific constraints that prevent the browser from acknowledging the DELETE method?
Here is the code snippet from index.js:
var express = require("express");
var app = express();
var cors = require("cors");
var bodyparser = require("body-parser");
app.use(bodyparser.urlencoded({ extended: true }));
app.use(bodyparser.json({ limit: "10mb" }));
//serve static files
app.use(express.static("public"));
app.use(cors());
let users = [
{
name: "Julieth",
lastName: "Bautista",
Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba1bea7a2aebfa38ba6a2bfe5aeafbe">[email protected]</a>",
password: "bigsecret",
balance: 0,
},
{
name: "Jose",
lastName: "Bautista",
Email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4bebba7b194b9bda0fab1b0a1">[email protected]</a>",
password: "secret",
balance: 233,
},
];
//create user route. GET should only retrieve data.
app.get(
"/account/create/:name/:lastname/:email/:password/:balance",
function (req, res) {
res.send({
name: req.params.name,
lastName: req.params.lastname,
email: req.params.email,
password: req.params.password,
balance: req.params.balance,
});
}
);
//GET should only retrieve data.
app.get("/account/logIn/:email/:password", function (req, res) {
res.send({
email: req.params.email,
password: req.params.password,
});
});
app.get("/account/all", function (req, res) {
res.send(users);
});
//post often causing a change in state or side effects on the server.
app.post("/account", function (req, res) {
var balance = req.body.balance;
const user = req.body.name;
const password = req.body.password;
users.push({ name: user, password: password, balance: balance });
res.send(users);
console.log("balance:" + balance);
});
//PUT replaces all current representations of the target resource with the request payload.
app.put("/account/withdraw", (req, res) => {
console.log(users);
const newArray = users.map((user) => {
if (user.name == req.body.name && user.password == req.body.password) {
if (user.balance == 0) return;
else {
newBalance = user.balance - req.body.balance;
user.balance = newBalance;
let myUser = user;
let updatedUser = { balance: newBalance, ...myUser };
user = updatedUser;
return user;
}
}
return users;
});
res.send(users);
});
app.put("/account/deposit", (req, res) => {
console.log(users);
const newArray = users.map((user) => {
if (user.name == req.body.name && user.password == req.body.password) {
newBalance = req.body.balance + user.balance;
user.balance = newBalance;
let myUser = user;
let updatedUser = { balance: newBalance, ...myUser };
user = updatedUser;
return user;
}
return users;
});
res.send(users);
});
//deletes the specified resource.
app.get("/account/delete/:name", function (req, res) {
console.log(users);
let filteredArray = users.filter((user) => user.name !== req.params.name);
users = filteredArray;
res.send(users);
res.sendStatus(204);
});
//indicate that the specified resource will be deleted, however doesn't work in browser
app.delete("/account/delete/:name", function (req, res) {
console.log(users);
let filteredArray = users.filter((user) => user.name !== req.params.name);
users = filteredArray;
res.sendStatus(204);
});
app.listen(3000, function () {
console.log("Runing on port 3000!");
});
To overcome the issue, I temporarily switched the method to GET and ensured cross-origin requests were allowed. Despite these adjustments, do you have any suggestions on resolving the problem without converting DELETE to GET for proper identification by the browser?