Axios ¿Eliminar solicitud con cuerpo y encabezados?

Estoy usando Axios mientras programo en ReactJS y pretendo enviar una solicitud DELETE a mi servidor.

Para hacerlo, necesito los encabezados:

headers: {
  'Authorization': ...
}

y el cuerpo se compone de

var payload = {
    "username": ..
}

He estado buscando en Internet y solo encontré que el método DELETE requiere un "param" y no acepta "datos".

He estado intentando enviarlo así:

axios.delete(URL, payload, header);

o incluso

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

Pero nada parece funcionar...

¿Alguien puede decirme si es posible (supongo que lo es) enviar una solicitud DELETE con encabezados y cuerpo y cómo hacerlo?

¡Gracias de antemano!

Entonces, después de varios intentos, lo encontré funcionando.

Siga la secuencia del pedido , es muy importante; de ​​lo contrario, no funcionará.

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

axiox.deleteadmite un cuerpo de solicitud. Acepta dos parámetros: url y configuración opcional. Puede usar config.datapara establecer el cuerpo de la solicitud y los encabezados de la siguiente manera:

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

Ver aquí: https://github.com/axios/axios/issues/897

Aquí hay un breve resumen de los formatos necesarios para enviar varios verbos http con axios:

• GET: Dos caminos

  • Primer método

    axios.get('/user?ID=12345')
      .then(function (response) {
        // Do something
      })
    

  • Segundo método

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

  Los dos anteriores son equivalentes. Observe la paramspalabra clave en el segundo método.

• POST y 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
  )
  

Conclusiones clave

• getlas solicitudes opcionalmente necesitan una paramsclave para configurar correctamente los parámetros de consulta
• deletelas solicitudes con un cuerpo necesitan que se establezca bajo una dataclave

axios. delete se pasa una URL y una configuración opcional .

axios.delete (url [, config])

Los campos disponibles para la configuración pueden incluir los encabezados .

Esto hace que la llamada a la API se pueda escribir como:

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

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

Tuve el mismo problema, lo resolví así:

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

De hecho, axios.deleteadmite un cuerpo de solicitud.
Acepta dos parámetros: URLay un opcional config. Es decir...

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

Puede hacer lo siguiente para establecer el cuerpo de respuesta para la solicitud de eliminación:

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)

¡Espero que esto ayude a alguien!

Para Eliminar, deberá hacer lo siguiente

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

Funcionó para mí.

Para enviar un HTTP DELETE con algunos encabezados a través de lo axiosque he hecho:

  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);

La axiossintaxis para diferentes verbos HTTP (GET, POST, PUT, DELETE) es complicada porque a veces se supone que el segundo parámetro es el cuerpo HTTP, otras veces (cuando puede que no sea necesario) simplemente pasa los encabezados como segundo parámetro .

Sin embargo, digamos que necesita enviar una solicitud HTTP POST sin un cuerpo HTTP, luego debe pasar undefinedcomo segundo parámetro.

Tenga en cuenta que de acuerdo con la definición del objeto de configuración ( https://github.com/axios/axios#request-config ) aún puede pasar un cuerpo HTTP en la llamada HTTP a través del datacampo al llamar axios.delete, sin embargo, para el HTTP BORRAR verbo será ignorado.

Esta confusión entre el segundo parámetro es a veces el cuerpo HTTP y en otras ocasiones el configobjeto completo axiosse debe a cómo se han implementado las reglas HTTP. A veces, no se necesita un cuerpo HTTP para que una llamada HTTP se considere válida.

Encontré el mismo problema ... Lo resolví creando una instancia de axios personalizada. y usar eso para hacer una solicitud de eliminación autenticada.

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

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

Probé todo lo anterior que no funcionó para mí. Terminé yendo con PUT (inspiración encontrada aquí ) y simplemente cambié la lógica del lado del servidor para realizar una eliminación en esta llamada de URL. (Anulación de la función del marco de descanso de django).

p.ej

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

Encontré una forma que funciona:

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

Espero que esto funcione para ti también.