Як встановити заголовки та параметри в axios?


159

Я використовую Axios, щоб виконувати повідомлення HTTP таким чином:

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

Це правильно? Або мені робити:

axios.post(url, params: params, headers: headers)

3
Мені цікаво, чому ви прийняли неправильну відповідь!
Сірван Афіфі

@SirwanAfifi На це питання немає прийнятої відповіді
Tessaracter

2
@Tessaracter 13 травня 2019 року надійшла відповідь з оцінкою -78. Про це дбали з того часу.
jkmartindale

@jkmartindale Цікаво
Tessaracter

Відповіді:


264

Існує кілька способів зробити це:

  • Для одного запиту:

    let config = {
      headers: {
        header1: value,
      }
    }
    
    let data = {
      'HTTP_CONTENT_LANGUAGE': self.language
    }
    
    axios.post(URL, data, config).then(...)
  • Для встановлення глобальної конфігурації за замовчуванням:

    axios.defaults.headers.post['header1'] = 'value' // for POST requests
    axios.defaults.headers.common['header1'] = 'value' // for all requests
  • Для встановлення за замовчуванням для екземпляра 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;
    });

1
Чи можу я попросити вас подивитися тут axiosпов’язане питання: stackoverflow.com/questions/59470085/… ?
Істіаке Ахмед

141

Ви можете надіслати запит на отримання заголовок (наприклад, для автентифікації з jwt):

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

Також ви можете надіслати запит на пошту.

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

Мій спосіб зробити це - встановити такий запит:

 axios({
  method: 'post', //you can set what request you want to be
  url: 'https://example.com/request',
  data: {id: varID},
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})

1
Ваш запит на друге повідомлення не містить конкретних заголовків, чи можете ви редагувати його для повного прикладу?
Смугастий

за допомогою datainterceptors.request => він замінить вашу частину актуальної частини тіла від конкретного виклику, який ми використовуємо. Так що не використовується в такому випадку.
Анупам Маурія

Чи потрібно дотримуватися цього стандарту "Авторизація:" Носій "+ маркер" чи ви можете зробити щось на кшталт Auth: token, наприклад? Я не використовую auth0 api, але роблю свій власний у вузлі, вибачте, якщо дурне запитання, нове для jwt та безпеки матеріалів взагалі
Wiliam Cardoso,

24

Ви можете передати конфігураційний об'єкт axios на зразок:

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

16

Це простий приклад конфігурації з заголовками та 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);
});

Тип вмісту може бути "application / x-www-form-urlencoded" або "application / json", і він може працювати також "application / json; charset = utf-8"

Тип відповіді може бути "arraybuffer", "blob", "документ", "json", "text", "stream"

У цьому прикладі this.data - це дані, які потрібно надіслати. Це може бути значення або масив. (Якщо ви хочете надіслати об’єкт, вам, ймовірно, доведеться його серіалізувати)


Чи можете ви пояснити різницю між встановленням заголовків нашим без ключового слова config?
пузир

1
Використання змінної конфігурації створює приємніший і читабельніший код; нічого іншого @ bubble-cord
gtamborero


10

Ви можете ініціалізувати заголовок за замовчуванням 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)
        })

9

якщо ви хочете зробити запит на отримання запису з парамами та заголовками.

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

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

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


2

спробуйте цей код

у прикладі використання коду axios get API відпочинку.

в змонтованому

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

Надія - це допомога.


2

Я зіткнувся з цим питанням у запиті після публікації . Я так змінився в заголовку axios. Це чудово працює.

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.