Como definir o cabeçalho e as opções em axios?
uso Axios para realizar uma publicação HTTP como esta:
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)
12 answers
Existem várias maneiras de fazer isto:
-
Para um único pedido:
let config = { headers: { header1: value, } } let data = { 'HTTP_CONTENT_LANGUAGE': self.language } axios.post(URL, data, config).then(...) -
Para definir a configuração global predefinida:
axios.defaults.headers.post['header1'] = 'value' // for POST requests axios.defaults.headers.common['header1'] = 'value' // for all requests -
Para a configuração por omissão na instância 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; });
Pode enviar um pedido get com cabeçalhos (para autenticação com o jwt, por exemplo):
axios.get('https://example.com/getSomething', {
headers: {
Authorization: 'Bearer ' + token //the token is a variable which holds the token
}
})
Também pode enviar um pedido de correio.
axios.post('https://example.com/postSomething', {
email: varEmail, //varEmail is a variable which holds the email
password: varPassword
},
{
headers: {
Authorization: 'Bearer ' + varToken
}
})
A minha maneira de o fazer é fazer um pedido como este.
axios({
method: 'post', //you can set what request you want to be
url: 'https://example.com/request',
data: {id: varID},
headers: {
Authorization: 'Bearer ' + varToken
}
})
axios.post('url', {"body":data}, {
headers: {
'Content-Type': 'application/json'
}
}
)Podes passar um objecto de configuração para axios como:
axios({
method: 'post',
url: '....',
params: {'HTTP_CONTENT_LANGUAGE': self.language},
headers: {'header1': value}
})
axios.post('url', {"body":data}, {
headers: {
'Content-Type': 'application/json'
}
}
)Este é um exemplo simples de uma configuração com cabeçalhos e respondedores:
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 can be 'application/x-www-form-urlencoded' or 'application / json' e pode funcionar também 'application / json;charset=utf-8'
O tipo de resposta pode ser 'arraybuffer',' blob',' document',' json',' text','stream'
Neste exemplo, isto.os dados são os dados que você deseja enviar. Pode ser um valor ou um Array. (Se você quiser enviar um objeto você provavelmente terá que serializar it)Pode inicializar um cabeçalho por omissão 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)
})
Se quiser fazer um pedido de obter com params e cabeçalhos.
var params = {
paramName1: paramValue1,
paramName2: paramValue2
}
var headers = {
headerName1: headerValue1,
headerName2: headerValue2
}
Axios.get(url, {params, headers} ).then(res =>{
console.log(res.data.representation);
});Tenta este código
Por exemplo, código utilizar axios obter API de descanso.
Em montagem
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);
});
}
Tenho de enfrentar esta questão no pós-pedido. Mudei assim no cabeçalho axios. Funciona bem.
axios.post('http://localhost/M-Experience/resources/GETrends.php',
{
firstName: this.name
},
{
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
Eu tive que criar um objeto fd=new FormData() e usar o método [.append()][1] antes de enviá-lo através de axios para a minha API Django, caso contrário eu recebo um erro de 400.
Na minha infra-estrutura, a imagem do perfil está relacionada através de uma relação única com o modelo do utilizador. Portanto, ele é serializado como um objeto aninhado e espera que isso para o pedido put para funcionar.
Todas as mudanças no estado dentro da interface são feitas com o método this.setState. Creio que a parte importante é o método de entrega de mãos no final.
Primeiro o meu axios pediu:
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,
¦ ¦ });
¦ })
}
O meu método de 'handleSubmit' precisa de criar o seguinte objecto json, onde o atributo da imagem é substituído pela entrada do utilizador:
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);
};
@user2950593 O seu pedido axios está correcto. Você precisa permitir seus cabeçalhos personalizados no lado do servidor. Se você tem sua api em php então este código vai funcionar para você.
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, HEAD");
header("Access-Control-Allow-Headers: Content-Type, header1");
Assim que permitir os seus cabeçalhos personalizados do lado do servidor, os seus pedidos axios vão começar a funcionar bem.