Почему я могу отлично протестировать метод удаления в Postman, но не в браузере?

Я обнаружил, что мой HTTP-запрос на удаление выполняется отлично, когда я тестирую его в Postman. Однако, когда я пытаюсь протестировать его в браузере, я получаю сообщение об ошибке «Невозможно GET /account/delete/Julieth». Мне удалось решить эту проблему, изменив метод на GET, который работает в обеих средах. Тем не менее мне любопытно, почему браузер не распознает метод DELETE. Существуют ли какие-либо ограничения браузера на метод DELETE?

мой код в 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.info("balance:" + balance);
});
//PUT replaces all current representations of the target resource with the request payload.
app.put("/account/withdraw", (req, res) => {
  console.info(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.info(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.info(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.info(users);
  let filteredArray = users.filter((user) => user.name !== req.params.name);
  users = filteredArray;
  res.sendStatus(204);
});

app.listen(3000, function () {
  console.info("Runing on port 3000!");
});

Я исправил это, изменив метод на GET. Кроме того, я проверяю, что мой сервер настроен на разрешение запросов на перекрестные запросы. Однако есть ли у вас идеи, как решить проблему, не заменяя delete на GET, чтобы браузер правильно его прочитал?

Как вы отправляете запрос на сервер?

luk2302 02.06.2024 23:31

Я нахожусь в процессе объединения моего внешнего интерфейса (React) с серверной частью (Express), а в файле index.js моего внутреннего интерфейса я тестирую маршруты, записывая HTTP-запросы на стороне сервера через URL-путь.

Julieth Bautista 02.06.2024 23:54

Это не ответ на мой вопрос. Как ваш клиент/браузер отправляет запросы на сервер и куда вы указываете, что он должен отправлять их как DELETE?

luk2302 02.06.2024 23:59

Похоже, что клиентская сторона просто отправляет запрос GET вместо DELETE. Если вы используете HTML-форму для отправки запроса, помните, что HTML-формы не могут отправить запрос DELETE без дополнительного JS. В противном случае убедитесь, что вы указываете метод запроса DELETE на стороне клиента.

Seif El-Din Sweilam 03.06.2024 02:13

Будет лучше, если вы вырежете код внешнего интерфейса для отправки запроса.

Seif El-Din Sweilam 03.06.2024 02:14

@ luk2302 luk2302 Я добавляю весь код выше. Надеюсь, это даст вам ответ. Просто чтобы вы знали: я использую «node index.js», чтобы отправить запрос на сервер, и он открывает localhost:3000. Затем я вызываю маршруты

Julieth Bautista 03.06.2024 09:09

SeifEl-DinSweilam Я добавляю весь код выше. Надеюсь, это поможет вам лучше понять, что я делаю! Просто чтобы вы знали: я использую «node index.js», чтобы отправить запрос на сервер, и он открывает localhost:3000. Затем я вызываю маршруты!

Julieth Bautista 03.06.2024 09:12

Как вы «вызываете маршруты»? Просто в адресной строке браузера? И я повторяю: куда вы указываете своему браузеру отправить DELETE? Я предполагаю: вы этого не делаете, и поэтому браузер отправляет GET, потому что зачем ему делать что-то еще?

luk2302 03.06.2024 09:34
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
8
51
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Судя по ошибке, вы пытаетесь сделать запрос GET. Браузер распознает запросы DELETE, только если вы отправляете их с помощью JS.

Пример:

fetch('/account/delete/Julieth', {
  method: 'DELETE'
})
.then(response => response.json()) 
.then(data => {
  console.info(data);
})
.catch(error => {
  console.error('Error:', error);
});
Ответ принят как подходящий

Кажется, вы пытаетесь использовать URI поиска в браузере, что невозможно. Браузер будет использовать только метод GET. Вам нужно использовать библиотеку для вызова удаления api.ex. fetch,axios,ajax.etc (при условии, что вы используете реакцию или jquery).

или

Вы можете попробовать следующий код в инструменте разработчика (консоль)

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

Другие вопросы по теме