Удаление с Headers и Body в Axios и ReactJS: решение

Быстрый ответ

Если вам нужно осуществить запрос DELETE, используя Axios, и при этом передать тело запроса и пользовательские заголовки, воспользуйтесь этим кодом:

axios.delete('/endpoint', {data: {/* Тело запроса */}, headers: {/* Пользовательские заголовки */}})
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

Таким образом, можно передать в запрос любые данные и заголовки.

Выполнение безопасной передачи данных с заголовками

Чтобы безопасно отправить данные на защищенные конечные точки, нередко приходится авторизовать запросы с помощью токенов. Пример:

// Подготовим заголовки для аутентификации.
const secureHeaders = {
  Authorization: `Bearer ваш_токен`
};

// Совершим DELETE-запрос с безопасной авторизацией.
axios.delete('/secure-endpoint', {
  data: { id: 12345 },
  headers: secureHeaders
});

Особое внимание уделите заголовку Authorization, именно он дает доступ к защищенным ресурсам.

Проверка совместимости версии Axios

Убедитесь, что вы используете версию Axios не старше v0.21.1 для корректной работы с DELETE-запросами, содержащими тело:

// Проверим версию Axios.
console.log(`Версия Axios: ${axios.VERSION}`);
// В случае необходимости обновим до последней версии:
// npm install axios@latest

В более ранних версиях библиотеки нет поддержки DELETE-запросов с телом.

Правильное формирование DELETE-запроса

Корректное оформление DELETE-запроса обязательно для успешной взаимосвязи с сервером:

// Структурируем запрос корректно.
{
  data: {/* Данные для передачи */},
  headers: {/* Необходимые заголовки */}
}

Включите эту структуру как второй аргумент при вызове метода axios.delete().

Визуализация

Пример отправки DELETE-запроса можно ассоциировать с доставкой личного сообщения и секретного пароля:

// Ваше тайное послание и пароль в контексте DELETE-запроса.
axios.delete('endpoint', { data: { letterContent: '...'}, headers: { passcode: 'Secret' } });

letterContent здесь представляет собой содержание вашего сообщения, а passcode – ключ к вашему секрету.

Продвинутые DELETE-запросы

Приемлемость отправки тела запроса при использовании метода DELETE

Отправлении тела запроса посредством метода DELETE, хоть и выходит за рамки стандартного использования, но допустимо и иногда необходимо, расширяя возможности для разработчиков:

// Применим DELETE-запрос с телом в аттрибутивной ситуации.
axios.delete('/resource', { 
  data: { metadata: 'данные для удаления' },
  headers: { 'Content-Type': 'application/json' }
});

Подробнее об этом расскажет наш спикер на видео

Прогнозирование поведения сервера

Не все серверы ожидают тело в DELETE-запросах, поэтому лучше уточнить это:

// Пример обработки случая, если сервер не принимает тело запроса DELETE.
axios.delete('/endpoint', { data: { foo: 'bar' } })
  .catch(error => {
    if(error.response.status === 400) {
      console.log('Сервер не предполагает получение тела в DELETE-запросах.');
    }
  });

Защита конфиденциальности данных

В процессе работы с DELETE-запросами важно гарантировать высокую степень защиты данных:

// Используем протокол HTTPS для безопасности данных.
axios.delete('https://secure.example.com/delete-account', { data: { accountId: 'abc123' } });

Автоматическое добавление заголовков с помощью перехватчиков

Перехватчики Axios дают возможность автоматизировать добавление заголовков, к примеру, токены аутентификации:

// Настраиваем перехватчик для автоматизации добавления заголовков Авторизации.
axios.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ваш_токен`;
  return config;
});

// Все DELETE-запросы теперь выполняются с авторизацией.
axios.delete('/settings', { data: { theme: 'dark' } });

Это упрощает код и снижает вероятность забыть доавить важные заголовки.

Полезные материалы

1. GitHub — axios/axios: HTTP-клиент на промисах для браузера и node.js — Официальный репозиторий Axios.
2. DELETE — HTTP | MDN — Документация по методу DELETE.
3. javascript — как отправить DELETE-запрос с телом и заголовками через Axios? — Stack Overflow — Обсуждение использования DELETE-запроса в Axios.
4. HTTP заголовки — HTTP | MDN — Обзор HTTP заголовков.
5. Использование Fetch API — Веб-API | MDN — Альтернативное использование Fetch вместо Axios.
6. Перехватчики | Документация Axios — Руководство по использованию перехватчиков в Axios.
7. Использование промисов — JavaScript | MDN — Информация о работе с промисами в JavaScript.