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


104

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

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

headers: {
  'Authorization': ...
}

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

var payload = {
    "username": ..
}

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

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

axios.delete(URL, payload, header);

или даже

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

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

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

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

Ответы:


126

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

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

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

97

axiox.deleteподдерживает тело запроса. Он принимает два параметра: URL-адрес и необязательную конфигурацию. Вы можете использовать config.dataдля установки тела запроса и заголовков следующим образом:

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

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


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

75

Вот краткое описание форматов, необходимых для отправки различных 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ключ

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

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

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

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

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

13

аксиос. Удалять есть прошло URL и дополнительной конфигурации .

axios.delete (URL [, конфигурация])

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

Это делает так, что вызов 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

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

6

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

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

5

Собственно, 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)

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


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


2

Чтобы отправить 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, некоторые другие времена (когда это возможно , не потребуется) вы просто передать заголовки , как 2 - го параметра .

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

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

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


0

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

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

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

0

Я пробовал все вышеперечисленное, но у меня не получалось. В итоге я просто использовал 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; });

-1

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

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

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

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.