Passando cabeçalhos com solicitação POST de axios


134

Eu escrevi uma solicitação POST axios conforme recomendado na documentação do pacote npm, como:

var data = {
    'key1': 'val1',
    'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data)       
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

E funciona, mas agora modifiquei minha API de back-end para aceitar cabeçalhos.

Tipo de Conteúdo: 'application / json'

Autorização: 'JWT fefege ...'

Agora, essa solicitação funciona bem no Postman, mas ao escrever uma chamada de axios, sigo este link e não consigo fazê-lo funcionar.

Estou constantemente recebendo 400 BAD Requesterros.

Aqui está o meu pedido modificado:

axios.post(Helper.getUserAPI(), {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...'
    },
    data
})      
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

Qualquer ajuda é muito apreciada.

Respostas:


241

Ao usar axios, para passar cabeçalhos personalizados, forneça um objeto contendo os cabeçalhos como o último argumento

Modifique sua solicitação de axios como:

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), data, {
    headers: headers
  })
  .then((response) => {
    dispatch({
      type: FOUND_USER,
      data: response.data[0]
    })
  })
  .catch((error) => {
    dispatch({
      type: ERROR_FINDING_USER
    })
  })

@KishoreJethava, 500 é erro interno do servidor, você pode verificar no lado do servidor, se cabeçalhos estão chegando ou se há algum outro bug
Shubham Khatri

@KishoreJethava, você pode apenas registrar os cabeçalhos no seu servidor e ver se você está recebendo os valores corretos
Shubham Khatri

Você não precisa postar nenhum dado? Também certifique-se this.state.token contém um valor
Shubham Khatri


@ShubhamKhatri, posso pedir para você dar uma olhada em uma axiospergunta relacionada aqui: stackoverflow.com/questions/59470085/… ?
Istiaque Ahmed 24/12/19

37

Aqui está um exemplo completo de uma solicitação axios.post com cabeçalhos personalizados

var postData = {
  email: "test@test.com",
  password: "password"
};

let axiosConfig = {
  headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      "Access-Control-Allow-Origin": "*",
  }
};

axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
.then((res) => {
  console.log("RESPONSE RECEIVED: ", res);
})
.catch((err) => {
  console.log("AXIOS ERROR: ", err);
})


enfrentando esse problema para obter solicitação. A resposta está chegando no formato xml. Isso não resolve o problema.
Eswar

3

Isso pode ser útil,

const data = {
  email: "me@me.com",
  username: "me"
};

const options = {
  headers: {
      'Content-Type': 'application/json',
  }
};

axios.post('http://path', data, options)
 .then((res) => {
   console.log("RESPONSE ==== : ", res);
 })
 .catch((err) => {
   console.log("ERROR: ====", err);
 })
Nota: Todos os códigos de status acima de 400 serão capturados no bloco de captura do Axios. Além disso, os cabeçalhos são opcionais para o método post no Axios

Bloco de citação

Bloco de citação


2

A resposta Shubham não funcionou para mim.

Ao usar a biblioteca axios e para passar cabeçalhos personalizados, você precisa construir cabeçalhos como um objeto com o nome da chave "headers". A chave dos cabeçalhos deve conter um objeto, aqui está o Tipo de Conteúdo e Autorização.

O exemplo abaixo está funcionando bem.

    var headers = {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...' 
    }
    axios.post(Helper.getUserAPI(), data, {"headers" : headers})

        .then((response) => {
            dispatch({type: FOUND_USER, data: response.data[0]})
        })
        .catch((error) => {
            dispatch({type: ERROR_FINDING_USER})
        })

1

Você também pode usar interceptores para passar os cabeçalhos

Pode economizar muito código

axios.interceptors.request.use(config => {
  if (config.method === 'POST' || config.method === 'PATCH' || config.method === 'PUT')
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

  const accessToken = AuthService.getAccessToken();
  if (accessToken) config.headers.Authorization = 'Bearer ' + accessToken;

  return config;
});

Eu sugiro usarconfig.method.toUpperCase()
Constantine

@ Constantino eu acho que já está em maiúsculas
Israel kusayev 25/06

Infelizmente, o meu era mais baixo
Constantine

0

Ou, se você estiver usando alguma propriedade do protótipo vuejs que não pode ser lida na criação, também pode definir cabeçalhos e escrever

storePropertyMaxSpeed(){
                axios.post('api/property', {
                    "property_name" : 'max_speed',
                    "property_amount" : this.newPropertyMaxSpeed
                    },
                    {headers :  {'Content-Type': 'application/json',
                                'Authorization': 'Bearer ' + this.$gate.token()}})
                  .then(() => { //this below peace of code isn't important 
                    Event.$emit('dbPropertyChanged');

                    $('#addPropertyMaxSpeedModal').modal('hide');

                    Swal.fire({
                        position: 'center',
                        type: 'success',
                        title: 'Nova brzina unešena u bazu',
                        showConfirmButton: false,
                        timer: 1500
                        })
                })
                .catch(() => {
                     Swal.fire("Neuspješno!", "Nešto je pošlo do đavola", "warning");
                })
            }
        },

-4

Json deve ser formatado com aspas duplas

Gostar:

headers: {
                "Content-Type": "application/Jason",
                "Authorization": "JWT fefege..."
            }

Não apenas:

headers: {
                'Content-Type': 'application/json',
                'Authorization': 'JWT fefege...'
         }

Isso é verdade para o formato JSON, mas ao usar o javascript, você pode escrever as seqüências de javascript da maneira que desejar e ainda funcionará - porque o serializador JSON nos axios não sabe a diferença! :-)
Jono 02/04
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.