Wie setze Header und Optionen in Axios?

159

Ich verwende Axios, um einen HTTP-Beitrag wie folgt auszuführen:

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

Ist das richtig? Oder soll ich tun:

axios.post(url, params: params, headers: headers)
user2950593
quelle
3
Ich frage mich, warum Sie eine falsche Antwort akzeptiert haben!
Sirwan Afifi
@ SirwanAfifi Es gibt keine akzeptierte Antwort auf diese Frage
Tessaracter
2
@Tessaracter Am 13. Mai 2019 gab es eine akzeptierte Antwort mit einer Punktzahl von -78. Es wurde seitdem erledigt.
jkmartindale
@jkmartindale Interessant
Tessaracter

Antworten:

261

Es gibt verschiedene Möglichkeiten, dies zu tun:

  • Für eine einzelne Anfrage:

    let config = {
      headers: {
        header1: value,
      }
    }
    
    let data = {
      'HTTP_CONTENT_LANGUAGE': self.language
    }
    
    axios.post(URL, data, config).then(...)
    
  • So legen Sie die globale Standardkonfiguration fest:

    axios.defaults.headers.post['header1'] = 'value' // for POST requests
    axios.defaults.headers.common['header1'] = 'value' // for all requests
    
  • Zum Festlegen der Standardeinstellung für die Axios-Instanz:

    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
quelle
1
Darf ich Sie bitten, sich axioshier eine verwandte Frage anzusehen : stackoverflow.com/questions/59470085/… ?
Istiaque Ahmed
140

Sie können eine Get-Anfrage mit Headern senden (zum Beispiel zur Authentifizierung mit jwt):

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

Sie können auch eine Post-Anfrage senden.

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

Meine Vorgehensweise besteht darin, eine Anfrage wie folgt zu stellen:

 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
quelle
1
Ihre zweite Post-Anfrage enthält keine spezifischen Header. Können Sie sie für ein vollständiges Beispiel bearbeiten?
Gestreift
Durch die Verwendung von datain interceptors.request => wird Ihr aktueller Körperteil von dem spezifischen Aufruf überschrieben, den wir verwenden. Also in solchen Fällen nicht verwendet.
Anupam Maurya
Müssen Sie diesen Standard von 'Autorisierung:' Inhaber '+ Token' befolgen oder können Sie beispielsweise etwas wie Auth: Token tun? Ich verwende keine auth0-API, sondern mache meine eigene im Knoten. Tut mir leid, wenn dumme Fragen zu JWT und Sicherheit im Allgemeinen neu sind
Wiliam Cardoso
23

Sie können ein Konfigurationsobjekt an Axios übergeben wie:

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

Dies ist ein einfaches Beispiel für eine Konfiguration mit Headern und Antworttyp:

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

Der Inhaltstyp kann "application / x-www-form-urlencoded" oder "application / json" sein und auch "application / json; charset = utf-8".

responseType kann 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' sein.

In diesem Beispiel sind diese Daten die Daten, die Sie senden möchten. Es kann ein Wert oder ein Array sein. (Wenn Sie ein Objekt senden möchten, müssen Sie es wahrscheinlich serialisieren.)

gtamborero
quelle
Können Sie den Unterschied zwischen dem Setzen der Header mit unserem ohne das Schlüsselwort config erklären?
Bubble-Cord
1
Die Verwendung einer Konfigurationsvariablen generiert einen schöneren und besser lesbaren Code. sonst nichts @ Bubble-Cord
gtamborero
14

Hier ist der richtige Weg: -

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

Prateek Arora
quelle
10

Sie können einen Standardheader initialisieren 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.
quelle
9

Wenn Sie eine Get-Anfrage mit Parametern und Headern ausführen möchten.

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
quelle
2

Versuchen Sie diesen Code

im Beispiel Code verwenden Axios Get Rest API.

in montiert

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

Hoffnung ist Hilfe.

Superup
quelle
2

Ich habe dieses Problem in der Post-Anfrage konfrontiert . Ich habe mich im Axios-Header so geändert. Es funktioniert gut.

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

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

Sethy Proem
quelle