Why can I test the delete method perfectly in Postman but not in the browser?

Question

I found that my HTTP delete request runs perfectly when I test it in Postman. However, when I try to test it in the browser, I receive a 'Cannot GET /account/delete/Julieth' error. I managed to resolve it by changing the method to GET, which works in both environments. Still, I'm curious why the browser doesn't recognize the DELETE method. Are there any constraints that the browser has against the DELETE method?

my code in 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: "[email protected]",
    password: "bigsecret",
    balance: 0,
  },
  {
    name: "Jose",
    lastName: "Bautista",
    Email: "[email protected]",
    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);
});

//deletes the specified resource. but doesn 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!");
});

I fixed it by changing the method to GET. Also, I make sure I have configured my server to allow requests for cross origin requests. However, do you have any ideas on how to solve the problem without having to change delete to GET so that the browser reads it correctly?

Answer 1

Seems you are trying in browser search uri which is not possible.Browser will hit only GET method.You have to use library to call the delete api.ex. fetch,axios,ajax .etc (assuming that you are using react or jquery).

or

You can try following code in developer tool(console)

 fetch('/account/delete/anyname', {
  method: 'DELETE'
})
.then(response => response.json()) 
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error("Error From server:", error);
});