Passar os cabeçalhos com pedido de axios POST [ReactJS]

escrevi um pedido axios POST, tal como 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 a minha API de infra-estrutura para aceitar cabeçalhos

Content-Type: 'application / json'

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

Agora este pedido funciona bem no carteiro, mas ao escrever uma chamada axios, eu entendo. esta ligação e não consigo pô-lo a funcionar.

Estou a conseguir 400 BAD Request error

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

Obrigado antecipadamente.

Author: Jagrati, 2017-06-18
Source

3 answers

Ao usar axios, para passar os cabeçalhos personalizados, forneça um objecto que contenha os cabeçalhos como último argumento

Modifique o seu pedido axios como 

        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})
            })
 29
Author: Shubham Khatri, 2018-09-10 05:21:14
Aqui está um exemplo completo de axios.enviar o pedido com cabeçalhos personalizados 

var postData = {
  email: "[email protected]",
  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);
})
 8
Author: Matthew Rideout, 2018-01-27 19:45:45
A resposta de Shubham não funcionou comigo.

Quando estiver a usar a biblioteca axios e para passar os cabeçalhos personalizados, terá de construir os cabeçalhos como um objecto com o nome da chave "cabeçalhos". A chave de cabeçalhos deve conter um objeto, aqui é o tipo de Conteúdo e autorização.

Abaixo do exemplo está a funcionar 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
Author: Think-Twice, 2018-07-25 06:40:23