Как установить заголовок и параметры в axios?

160

Я использую 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)
user2950593
источник
3
Мне интересно, почему вы приняли неправильный ответ!
Сирван Афифи
@SirwanAfifi На этот вопрос не принято ответа
Tessaracter
2
@Tessaracter 13 мая 2019 года был принят ответ со счетом -78. С тех пор об этом позаботились.
jkmartindale
@jkmartindale Интересно
Tessaracter

Ответы:

265

Есть несколько способов сделать это:

  • Для одного запроса:

    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;
    });
Riyaz-али
источник
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
Ваш второй пост-запрос не содержит конкретных заголовков, можете ли вы отредактировать его для полного примера?
Полосатый
с помощью datain interceptors.request => он переопределит вашу актуальную часть тела от конкретного вызова, который мы используем. Так что не используется в таком случае.
Анупам Маурья
Нужно ли вам следовать этому стандарту «Авторизация:« Носитель »+ токен» или вы можете сделать что-то вроде, например, Auth: токен? Я не использую auth0 api, но делаю свое собственное в ноде, извините, если глупый вопрос, плохо знакомый с jwt и вопросами безопасности в целом
Wiliam Cardoso
24

Вы можете передать объект конфигурации в axios, например:

axios({
  method: 'post',
  url: '....',
  params: {'HTTP_CONTENT_LANGUAGE': self.language},
  headers: {'header1': value}
})
sjc42002
источник
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);
});

Content-Type может быть 'application / x-www-form-urlencoded' или 'application / json', и он также может работать 'application / json; charset = utf-8'

responseType может быть 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

В этом примере this.data - это данные, которые вы хотите отправить. Это может быть значение или массив. (Если вы хотите отправить объект, вам, вероятно, придется его сериализовать)

gtamborero
источник
Можете ли вы объяснить разницу между настройкой заголовков с помощью нашего без ключевого слова config?
пузырьковый шнур
1
Использование переменной config создает более приятный и читаемый код; ничего больше @ пузырь-шнур
gtamborero
14

Вот правильный путь: -

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

Пратик Арора
источник
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

если вы хотите сделать запрос get с параметрами и заголовками.

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

Надеюсь, это помощь.

superup
источник
2

Я столкнулся с этой проблемой в почтовом запросе . Я изменился, как это в заголовке Axios. Работает нормально.

axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });
Najathi
источник