Passage d'en-têtes avec axios POST demande [ReactJS]

Question

J'ai écrit un axios Requête POST comme recommandé du mécanisme national de prévention de la documentation du paquet comme

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

Et ça marche, mais maintenant, j'ai modifié mon backend API pour accepter les en-Têtes

Content-Type: application/json'

Autorisation: 'JWT fefege...'

Maintenant cette requête fonctionne très bien sur le FACTEUR, mais lors de l'écriture d'un axios appel, j'ai suivi ce lien et n'arrive pas à le faire fonctionner.

Je suis l'ensemble obtention 400 BAD Request error

Voici ma Demande modifiée

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

Toute aide est grandement Appréciée

Merci à l'avance.

Answer 1

Lorsque vous utilisez axios, pour passer des en-têtes personnalisés, fournissez un objet contenant les en-têtes en dernier argument.

Modifiez votre demande axios comme

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

Answer 2

Voici un exemple complet d'une demande axios.post avec des en-têtes personnalisés

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

Answer 3

La réponse de Shubham n'a pas fonctionné pour moi.

Lorsque vous utilisez la bibliothèque axios et que vous transmettez des en-têtes personnalisés, vous devez créer des en-têtes en tant qu’objet avec le nom de clé "en-têtes". La clé d'en-tête doit contenir un objet, ici le type de contenu et l'autorisation.

L'exemple ci-dessous fonctionne bien.

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

Answer 4

Json doit être mis en forme avec des guillemets

Comme:

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

Pas seulement:

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