Jak ustawić nagłówek i opcje w Axios?

159

Używam Axios do wykonania postu HTTP w ten sposób:

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

Czy to jest poprawne? A może powinienem:

axios.post(url, params: params, headers: headers)
user2950593
źródło
3
Zastanawiam się, dlaczego przyjąłeś złą odpowiedź!
Sirwan Afifi,
@SirwanAfifi Nie ma zaakceptowanej odpowiedzi na to pytanie
Tessaracter
2
@Tessaracter 13 maja 2019 roku otrzymano zaakceptowaną odpowiedź z wynikiem -78. Od tego czasu zadbano o to.
jkmartindale
@jkmartindale Ciekawe
Tessaracter

Odpowiedzi:

264

Można to zrobić na kilka sposobów:

  • W przypadku jednego wniosku:

    let config = {
      headers: {
        header1: value,
      }
    }
    
    let data = {
      'HTTP_CONTENT_LANGUAGE': self.language
    }
    
    axios.post(URL, data, config).then(...)
  • Aby ustawić domyślną konfigurację globalną:

    axios.defaults.headers.post['header1'] = 'value' // for POST requests
    axios.defaults.headers.common['header1'] = 'value' // for all requests
  • Aby ustawić jako domyślne w instancji 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
źródło
1
czy mogę prosić o spojrzenie na axiospodobne pytanie tutaj: stackoverflow.com/questions/59470085/… ?
Istiaque Ahmed
141

Możesz wysłać żądanie get z nagłówkami (na przykład w celu uwierzytelnienia za pomocą jwt):

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

Możesz także wysłać prośbę o wpis.

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

Mój sposób na zrobienie tego polega na ustawieniu takiego żądania:

 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
źródło
1
Twoje drugie żądanie nie zawiera konkretnych nagłówków, czy możesz je edytować, aby uzyskać pełny przykład?
Striped
używając datain interceptors.request => nadpisuje twoją rzeczywistą część ciała z określonego wywołania, którego używamy. Więc nie używany w takim przypadku.
Anupam Maurya
Czy musisz przestrzegać tego standardu „Autoryzacja:„ Okaziciel ”+ token, czy możesz na przykład zrobić coś takiego jak Auth: token? Nie używam interfejsu API auth0, ale robię własne w węźle, przepraszam, jeśli głupie pytanie jest nowe w jwt i ogólnie rzeczach dotyczących bezpieczeństwa
Wiliam Cardoso
24

Możesz przekazać obiekt konfiguracyjny do Axios, na przykład:

axios({
  method: 'post',
  url: '....',
  params: {'HTTP_CONTENT_LANGUAGE': self.language},
  headers: {'header1': value}
})
sjc42002
źródło
16

Oto prosty przykład konfiguracji z nagłówkami i typem odpowiedzi:

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 może mieć postać „application / x-www-form-urlencoded” lub „application / json”, a także „application / json; charset = utf-8”

typ odpowiedzi może być „arraybuffer”, „blob”, „document”, „json”, „text”, „stream”

W tym przykładzie this.data to dane, które chcesz wysłać. Może to być wartość lub tablica. (Jeśli chcesz wysłać obiekt, prawdopodobnie będziesz musiał go serializować)

gtamborero
źródło
Czy możesz wyjaśnić różnicę między ustawieniem nagłówków za pomocą naszego bez słowa kluczowego config?
sznur bąbelkowy
1
Użycie zmiennej konfiguracyjnej generuje ładniejszy i bardziej czytelny kod; nic więcej @ bubble-cord
gtamborero
14

Oto właściwy sposób: -

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

Prateek Arora
źródło
10

Możesz zainicjować domyślny nagłówek 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
źródło
9

jeśli chcesz wykonać żądanie get z parametrami i nagłówkami.

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
źródło
2

wypróbuj ten kod

w przykładowym kodzie użyj axios get rest API.

w zamontowanym

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

Nadzieja jest pomocą.

superup
źródło
2

Spotkałem się z tym problemem we wniosku pocztowym . Zmieniłem tak w nagłówku Axios. To działa dobrze.

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

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

Sethy Proem
źródło