如何在axios中设置标题和选项?

你可以传递一个配置对象给axios，比如:

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

有几种方法可以做到:

• 对于单个请求:

  let config = {
  headers: {
  header1: value,
  }
  }
  
  
  let data = {
  'HTTP_CONTENT_LANGUAGE': self.language
  }
  
  
  axios.post(URL, data, config).then(...)
  

• For setting default global config:

  axios.defaults.headers.post['header1'] = 'value' // for POST requests
  axios.defaults.headers.common['header1'] = 'value' // for all requests
  

• For setting as default on axios instance:

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

你可以用Headers发送一个get请求(例如使用jwt进行身份验证):

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

你也可以发送一个post请求。

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

这是一个简单的配置头和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);
});

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

在这个例子中，这个。数据就是你想要发送的数据。它可以是一个值或数组。(如果你想发送一个对象，你可能需要序列化它)

你可以初始化一个默认头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)
})

如果你想用参数和头来做一个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);
});

试试这段代码

在示例代码中使用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);
});
}

希望就是帮助。

我在申请职位时遇到了这个问题。我在axios header中做了如下更改。它工作得很好。

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

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, HEAD");
header("Access-Control-Allow-Headers: Content-Type, header1");

一旦您允许在服务器端使用自定义头文件，axios请求就可以正常工作了。

对前端状态的所有更改都是通过this.setState方法完成的。我认为最重要的部分是最后的handleSubmit方法。

首先我的axios put请求:

export const PutUser=(data)=>(dispatch,getState)=>{
dispatch({type: AUTH_USER_LOADING});
const token=getState().auth.token;
axios(
{
¦ method:'put',
¦ url:`https://<xyz>/api/account/user/`,
¦ data:data,
¦ headers:{
¦ ¦ Authorization: 'Token '+token||null,
¦ ¦ 'Content-Type': 'multipart/form-data',
¦ }
})
¦ .then(response=>{
¦ ¦ dispatch({
¦ ¦ ¦ type: AUTH_USER_PUT,
¦ ¦ ¦ payload: response.data,
¦ ¦ });
¦ })
¦ .catch(err=>{
¦ ¦ dispatch({
¦ ¦ ¦ type:AUTH_USER_PUT_ERROR,
¦ ¦ ¦ payload: err,
¦ ¦ });
¦ })
}

我的handleSubmit方法需要创建以下json对象，其中图像属性被实际的用户输入所取代:

user:{
username:'charly',
first_name:'charly',
last_name:'brown',
profile:{
image: 'imgurl',
}
}

handleSubmit=(e)=>{
¦ e.preventDefault();
¦ let fd=new FormData();
¦ fd.append('username',this.state.username);
¦ fd.append('first_name',this.state.first_name);
¦ fd.append('last_name',this.state.last_name);
¦ if(this.state.image!=null){fd.append('profile.image',this.state.image, this.state.image.name)};
¦ this.props.PutUser(fd);
};

你也可以为每个axios请求设置选定的头文件:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
config.headers.Authorization = 'AUTH_TOKEN';
return config;
});

第二种方法

axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';

使用异步/等待

Axios post签名

post(url: string, data?: any, config?: AxiosRequestConfig):承诺< data和config都是Optional

AxiosRequestConfig可以查看- https://github.com/axios/axios/blob/e462973a4b23e9541efe3e64ca120ae9111a6ad8/index.d.ts#L60

 ....
....
try {
....
....
const url = "your post url"
const data = {
HTTP_CONTENT_LANGUAGE: self.language
}
const config = {
headers: {
"header1": value
},
timeout: 1000,
// plenty more options can be added, refer source link above
}


const response = await axios.post(url, data, config);
// If Everything's OK, make use of the response data
const responseData = response.data;
....
....
}catch(err){
// handle the error
if(axios.isAxiosError(err){
....
....
}
}

var axios = require("axios").default;


var options = {
method: 'GET',
url: 'https://api.pexels.com/v1/curated',
params: {page: '2', per_page: '40'},
headers: {Authorization: '_authkey_'}
};


axios.request(options).then(function (response) {
console.log(response.data);
}).catch(function (error) {
console.error(error);
});