Axios Удалить запрос с телом и заголовками?

Я использую Axios при программировании в ReactJS и делаю вид, что отправляю запрос DELETE на свой сервер.

Для этого мне нужны заголовки:

headers: {
  'Authorization': ...
}

и тело состоит из

var payload = {
    "username": ..
}

Я искал в интервалах и только обнаружил, что метод DELETE требует «param» и не принимает «data».

Пытался отправить вот так:

axios.delete(URL, payload, header);

или даже

axios.delete(URL, {params: payload}, header);

Но вроде ничего не работает ...

Может ли кто-нибудь сказать мне, возможно ли (я предполагаю, что это возможно) отправить запрос DELETE с заголовками и телом и как это сделать?

Заранее спасибо!

Поведение ключевого слова "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) для оценки ваших знаний,...
156
0
240 373
13
Перейти к ответу Данный вопрос помечен как решенный

Ответы 13

axios.delete поддерживает тело запроса. Он принимает два параметра: url и необязательный config. Вы можете использовать config.data для установки тела запроса и заголовков следующим образом:

axios.delete(url, { data: { foo: "bar" }, headers: { "Authorization": "***" } });

Смотрите здесь - https://github.com/axios/axios/issues/897

Дело в том, что я хочу отправить тело и заголовки в одном запросе на удаление

Asfourhundred 28.06.2018 19:55

аксиос.Удалить - это передал URL-адрес и необязательную конфигурацию.

axios.delete(url[, config])

Поля доступные для конфигурации могут включать заголовки.

Это делает так, что вызов API может быть записан как:

const headers = {
  'Authorization': 'Bearer paperboy'
}
const data = {
  foo: 'bar'
}

axios.delete('https://foo.svc/resource', {headers, data})

У меня это не работает ... У меня const headers = {'Authorization': ...} и data = {'username': ...} заканчиваются на axios.delete('http://...', {headers, data}), но сервер не может получить доступ к заголовкам ...

Asfourhundred 28.06.2018 19:33

Запрос, исходящий из браузера, говорит о другом. См. Этот Stackblitz (stackblitz.com/edit/react-gq1maa), а также запрос на вкладке сети браузера (snag.gy/JrAMjD.jpg). Здесь вы должны быть уверены, что вы правильно читаете серверную часть заголовков или что запрос не перехвачен и не подделан.

Oluwafemi Sule 30.06.2018 12:39

работал у меня, я использую React и Django

Harshit Gangwar 02.02.2021 16:51

Чтобы отправить HTTP DELETE с некоторыми заголовками через axios, я сделал следующее:

  const deleteUrl = "http//foo.bar.baz";
  const httpReqHeaders = {
    'Authorization': token,
    'Content-Type': 'application/json'
  };
  // check the structure here: https://github.com/axios/axios#request-config
  const axiosConfigObject = {headers: httpReqHeaders}; 

  axios.delete(deleteUrl, axiosConfigObject);

Синтаксис axios для разных HTTP-глаголов (GET, POST, PUT, DELETE) сложен, потому что иногда второй параметр должен быть телом HTTP, а иногда (когда он может не понадобиться) вы просто передаете заголовки как второй параметр.

Однако предположим, что вам нужно отправить запрос HTTP POST без тела HTTP, тогда вам нужно передать undefined в качестве второго параметра.

Помните, что согласно определению объекта конфигурации (https://github.com/axios/axios#request-config) вы все равно можете передавать тело HTTP в HTTP-вызове через поле data при вызове axios.delete, однако для команды HTTP DELETE он будет проигнорирован.

Эта путаница между вторым параметром, который иногда является телом HTTP, а иногда и целым объектом config для axios, связана с тем, как были реализованы правила HTTP. Иногда тело HTTP не требуется для того, чтобы HTTP-вызов считался действительным.

Вот краткое описание форматов, необходимых для отправки различных http-глаголов с аксиомами:

  • GET: два пути

    • Первый способ

      axios.get('/user?ID=12345')
        .then(function (response) {
          // Do something
        })
      
    • Второй способ

      axios.get('/user', {
          params: {
            ID: 12345
          }
        })
        .then(function (response) {
          // Do something
        })
      

    Два приведенных выше эквивалентны. Обратите внимание на ключевое слово params во втором методе.

  • POST и PATCH

    axios.post('any-url', payload).then(
      // payload is the body of the request
      // Do something
    )
    
    axios.patch('any-url', payload).then(
      // payload is the body of the request
      // Do something
    )
    
  • DELETE

    axios.delete('url', { data: payload }).then(
      // Observe the data keyword this time. Very important
      // payload is the request body
      // Do something
    )
    

Ключевые выводы

  • Запросы get необязательно требуют ключа params для правильной установки параметров запроса.
  • Запросы delete с телом должны быть установлены под ключом data

Ваш ответ заставляет меня желать, чтобы при переполнении стека была функция +2 голоса.

eli-bd 19.02.2019 07:52

Это единственный ответ, который подробно объясняет это. Спасибо, это действительно помогло понять даже другим.

Geoff 04.03.2020 11:45

Как отправить запрос на удаление с параметрами, а не с телом?

Ajay Singh 30.06.2020 14:46

Лучший ответ на этот вопрос. Спасибо.

HartleySan 06.07.2020 03:38

@MaFiA, если вы хотите отправить запрос на удаление с параметрами. Вы можете просто поместить его в URL-адрес, используя строки запроса

Van_Paitin 25.08.2020 19:57

Отличное объяснение, избавившее меня от потенциальной головной боли. Спасибо!

Nimsrules 01.09.2020 10:48

Я не могу заставить это работать. При отправке axios.delete('some-url',{data: someObj}) отправляется сообщение DELETE без тела.

geoidesic 22.11.2020 14:23
someObj, вероятно, равен нулю или не определен. Убедитесь, что никто не редактировал someObj перед отправкой запроса
Van_Paitin 23.11.2020 17:43

Он не работает, я отправляю {data: payload} для удаления, но он все равно не отправляет тело запроса

Amar Shakya 29.12.2020 13:22

есть идеи, как это работает для nuxt axios? \

Amar Shakya 29.12.2020 13:24

Я столкнулся с той же проблемой ... Я решил это, создав собственный экземпляр axios. и используя это для выполнения аутентифицированного запроса на удаление ..

const token = localStorage.getItem('token');
const request = axios.create({
        headers: {
            Authorization: token
        }
    });

await request.delete('<your route>, { data: { <your data> }});

У меня была такая же проблема, которую я решил вот так:

axios.delete(url, {data:{username:"user", password:"pass"}, headers:{Authorization: "token"}})

Для удаления вам нужно будет сделать следующее

axios.delete("/<your endpoint>", { data:<"payload object">})

У меня это сработало.

Ответ принят как подходящий

Итак, после нескольких попыток я обнаружил, что это работает.

Пожалуйста, соблюдайте последовательность заказа очень важно иначе не получится

axios.delete(URL, {
  headers: {
    Authorization: authorizationToken
  },
  data: {
    source: source
  }
});

Здравствуйте, вы можете объяснить, почему ваш ответ работает?

Franco Gil 06.01.2021 18:15

Возможно потому, что у DELETE не должно быть тел запросов. Может там что-то мешает (как и должно)

Evert 16.02.2021 07:33

@Evert неверно, запросы DELETE имеют не определенная семантика для тела, поэтому вы можете иметь тело запроса, но старые реализации могут отклонить запрос. ИМО, у вас должно быть тело запроса и устаревшие старые клиенты и ротация новых клиентов на их месте.

Victor Pudeyev 03.06.2021 18:08

@VictorPudeyev, я понимаю, что язык в спецификации HTTP сбивает с толку. Да, появляется тело май, но оно должно иметь какое-то значение для сервера. Таким образом, нет веских причин для добавления тела в тело HTTP DELETE. Так что можно добавить тело, но это бессмысленно.

Evert 03.06.2021 19:11

Итак, мой первоначальный комментарий верен. Фактически, это абзац из предстоящей спецификации HTTP, который повторяет следующее: «Клиенту НЕ СЛЕДУЕТ генерировать контент в запросе DELETE. Контент, полученный в запросе DELETE, не имеет определенной семантики, не может изменять значение или цель запроса и может привести некоторые реализации, чтобы отклонить запрос ".

Evert 03.06.2021 19:29

@VictorPudeyev Отказ от ответственности, я помогал писать это. Ссылка: httpwg.org/http-core/…

Evert 03.06.2021 19:29

@Evert отметил, спасибо

Victor Pudeyev 04.06.2021 20:48

Собственно, axios.delete поддерживает тело запроса.
Он принимает два параметра: URL и дополнительный config. Это...

axios.delete(url: string, config?: AxiosRequestConfig | undefined)

Вы можете сделать следующее, чтобы задать тело ответа для запроса на удаление:

let config = { 
    headers: {
        Authorization: authToken
    },
    data: { //! Take note of the `data` keyword. This is the request body.
        key: value,
        ... //! more `key: value` pairs as desired.
    } 
}

axios.delete(url, config)

Я надеюсь, что это поможет кому-то!

Спасибо, я использую это в моем методе удаления nestJs HttpService как: this.httpService.delete (apiUrl, {headers: headersRequest, data: deleteBody})

shanti 16.07.2020 11:24

Я нашел способ, который работает:

axios
      .delete(URL, {
        params: { id: 'IDDataBase'},
        headers: {
          token: 'TOKEN',
        },
      }) 
      .then(function (response) {
        
      })
      .catch(function (error) {
        console.info(error);
      });

Я надеюсь, что это сработает и для вас.

Я попробовал все вышеперечисленное, но у меня не получилось. В итоге я просто перешел с PUT (вдохновение нашло здесь) и просто изменил логику на стороне сервера, чтобы выполнить удаление этого URL-адреса. (переопределение функции django rest framework).

например

.put(`http://127.0.0.1:8006/api/updatetoken/20`, bayst)
      .then((response) => response.data)
      .catch((error) => { throw error.response.data; });

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

"axios": "^0.21.1" (not 0.20.0)

Затем приведенные выше решения работают

axios.delete("URL", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
      data: {
        var1: "var1",
        var2: "var2"
      },
    })

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

req.body.var1, req.body.var2

Вот в чем проблема:

https://github.com/axios/axios/issues/3335

Если мы имеем:

myData = { field1: val1, field2: val2 }

Мы могли бы преобразовать данные (JSON) в строку, а затем отправить ее в качестве параметра (в бэкэнд):

axios.delete("http://localhost:[YOUR PORT]/api/delete/" + JSON.stringify(myData), 
     { headers: { 'authorization': localStorage.getItem('token') } }
 )

На стороне сервера мы возвращаем наш объект:

app.delete("/api/delete/:dataFromFrontEnd", requireAuth, (req, res) => {
    const myData = JSON.parse(req.params.dataFromFrontEnd)
    // we could get our object back:
    //      myData = { field1: val1, field2: val2 }
 })

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