¿Cómo configurar el encabezado y las opciones en axios?

160

Yo uso Axios para realizar una publicación HTTP como esta:

import axios from 'axios'
params = {'HTTP_CONTENT_LANGUAGE': self.language}
headers = {'header1': value}
axios.post(url, params, headers)

¿Es esto correcto? O debería hacer:

axios.post(url, params: params, headers: headers)
usuario2950593
fuente
3
Me pregunto por qué aceptaste una respuesta incorrecta.
Sirwan Afifi
@SirwanAfifi No hay respuesta aceptada para esta pregunta
Tessaracter
2
@Tessaracter El 13 de mayo de 2019, hubo una respuesta aceptada con un puntaje de -78. Se ha cuidado desde entonces.
jkmartindale
@jkmartindale Interesante
Tessaracter

Respuestas:

265

Hay varias formas de hacer esto:

  • Para una sola solicitud:

    let config = {
      headers: {
        header1: value,
      }
    }
    
    let data = {
      'HTTP_CONTENT_LANGUAGE': self.language
    }
    
    axios.post(URL, data, config).then(...)
  • Para configurar la configuración global predeterminada:

    axios.defaults.headers.post['header1'] = 'value' // for POST requests
    axios.defaults.headers.common['header1'] = 'value' // for all requests
  • Para configurar por defecto en la instancia de axios:

    let instance = axios.create({
      headers: {
        post: {        // can be common or any other method
          header1: 'value1'
        }
      }
    })
    
    //- or after instance has been created
    instance.defaults.headers.post['header1'] = 'value'
    
    //- or before a request is made
    // using Interceptors
    instance.interceptors.request.use(config => {
      config.headers.post['header1'] = 'value';
      return config;
    });
riyaz-ali
fuente
1
¿Puedo pedirle que eche un vistazo a una axiospregunta relacionada aquí: stackoverflow.com/questions/59470085/… ?
Istiaque Ahmed
141

Puede enviar una solicitud de obtención con encabezados (por ejemplo, para autenticación con jwt):

axios.get('https://example.com/getSomething', {
 headers: {
   Authorization: 'Bearer ' + token //the token is a variable which holds the token
 }
})

También puede enviar una solicitud de publicación.

axios.post('https://example.com/postSomething', {
 email: varEmail, //varEmail is a variable which holds the email
 password: varPassword
},
{
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})

Mi forma de hacerlo es establecer una solicitud como esta:

 axios({
  method: 'post', //you can set what request you want to be
  url: 'https://example.com/request',
  data: {id: varID},
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})
roli roli
fuente
1
Su segunda solicitud de publicación no proporciona encabezados específicos, ¿puede editarla para ver un ejemplo completo?
Rayado
mediante el uso datade interceptors.request => anulará su parte actual del cuerpo de la llamada específica que estamos utilizando. Entonces no se usa en tal caso.
Anupam Maurya
¿Tiene que seguir este estándar de 'Autorización:' Portador '+ token' o puede hacer algo como Auth: token, por ejemplo? No estoy usando auth0 api pero estoy haciendo mi propio nodo, lo siento si es una pregunta estúpida nueva para jwt y cosas de seguridad en general
Wiliam Cardoso
24

Puede pasar un objeto de configuración a axios como:

axios({
  method: 'post',
  url: '....',
  params: {'HTTP_CONTENT_LANGUAGE': self.language},
  headers: {'header1': value}
})
sjc42002
fuente
16

Este es un ejemplo simple de una configuración con encabezados y responseType:

var config = {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  responseType: 'blob'
};

axios.post('http://YOUR_URL', this.data, config)
  .then((response) => {
  console.log(response.data);
});

Content-Type puede ser 'application / x-www-form-urlencoded' o 'application / json' y también puede funcionar 'application / json; charset = utf-8'

responseType puede ser 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

En este ejemplo, this.data son los datos que desea enviar. Puede ser un valor o una matriz. (Si desea enviar un objeto, probablemente tendrá que serializarlo)

gtamborero
fuente
¿Puedes explicar la diferencia entre configurar los encabezados con nuestro sin la palabra clave config?
cordón de burbujas
1
El uso de una variable de configuración genera un código más agradable y más legible; nada más @ bubble-cord
gtamborero
14

Aquí está la manera correcta: -

axios.post('url', {"body":data}, {
    headers: {
    'Content-Type': 'application/json'
    }
  }
)

Prateek Arora
fuente
10

Puede inicializar un encabezado predeterminado axios.defaults.headers

 axios.defaults.headers = {
        'Content-Type': 'application/json',
        Authorization: 'myspecialpassword'
    }

   axios.post('https://myapi.com', { data: "hello world" })
        .then(response => {
            console.log('Response', response.data)
        })
        .catch(e => {
            console.log('Error: ', e.response.data)
        })
Morris S
fuente
9

si desea hacer una solicitud de obtención con parámetros y encabezados.

var params = {
  paramName1: paramValue1,
  paramName2: paramValue2
}

var headers = {
  headerName1: headerValue1,
  headerName2: headerValue2
}

 Axios.get(url, {params, headers} ).then(res =>{
  console.log(res.data.representation);
});

Rishith Poloju
fuente
2

prueba este código

en el código de ejemplo, use axios get rest API

en montado

  mounted(){
    var config = {
    headers: { 
      'x-rapidapi-host': 'covid-19-coronavirus-statistics.p.rapidapi.com',
      'x-rapidapi-key': '5156f83861mshd5c5731412d4c5fp18132ejsn8ae65e661a54' 
      }
   };
   axios.get('https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats? 
    country=Thailand',  config)
    .then((response) => {
    console.log(response.data);
  });
}

La esperanza es ayuda.

superup
fuente
2

Me he enfrentado a este problema en la solicitud posterior . He cambiado así en el encabezado axios. Funciona bien.

axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });
Najathi
fuente
1

axios.post('url', {"body":data}, {
    headers: {
    'Content-Type': 'application/json'
    }
  }
)

Sethy Proem
fuente