如何在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
我想知道为什么您接受错误的答案!
Sirwan Afifi

@SirwanAfifi这个问题没有被接受的答案
Tessaracter

2
@Tessaracter在2019年5月13日,有一个分数为-78的可接受答案。从那时起,它就得到了照顾。
jkmartindale

@jkmartindale有趣的
Tessaracter

Answers:


263

做这件事有很多种方法:

  • 对于单个请求:

    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/…吗?
Istiaque Ahmed

141

您可以发送带有标头的get请求(例如,使用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
您的第二个帖子请求没有提供特定的标题,您可以为完整的示例进行编辑吗?
条纹

通过data在interceptors.request =>中使用,它将覆盖我们正在使用的特定调用中的实际身体部位。因此,在这种情况下不使用。
Anupam Maurya

您是否必须遵循“授权:'承载者+令牌”这一标准,或者您可以执行诸如Auth:令牌之类的事情?我没有使用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);
});

Content-Type可以是'application / x-www-form-urlencoded'或'application / json',它也可以使用'application / json; charset = utf-8'

responseType可以是'arraybuffer','blob','document','json','text','stream'

在此示例中,this.data是您要发送的数据。它可以是一个值或一个数组。(如果要发送对象,则可能必须对其进行序列化)


您能解释一下在没有config关键字的情况下使用我们设置标题的区别吗?
起泡

1
使用config变量会生成更美观,更易读的代码;没有什么@ 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

如果您想使用参数和标头进行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获取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);
  });
}

希望是帮助。


2

我在邮寄要求中遇到了这个问题。我在axios标头中做了这样的更改。工作正常。

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.