Passer des en-têtes avec la requête axios POST

135

J'ai écrit une requête axios POST comme recommandé dans la documentation du package npm 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 cela fonctionne, mais maintenant j'ai modifié mon API backend pour accepter les en-têtes.

Content-Type: 'application / json'

Autorisation: 'JWT fefege ...'

Maintenant, cette requête fonctionne bien sur Postman, mais lorsque j'écris un appel axios, je suis ce lien et je n'arrive pas à le faire fonctionner.

Je reçois constamment des 400 BAD Requesterreurs.

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.

Jagrati
la source

Réponses:

242

Lors de l'utilisation d'axios, pour passer des en-têtes personnalisés, fournissez un objet contenant les en-têtes comme dernier argument

Modifiez votre demande axios comme:

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
    })
  })
Shubham Khatri
la source
@KishoreJethava, 500 est une erreur de serveur interne, pouvez-vous vérifier côté serveur si les en-têtes arrivent ou y a-t-il un autre bogue
Shubham Khatri
@KishoreJethava, pouvez-vous simplement enregistrer les en-têtes sur votre serveur et voir si vous obtenez les valeurs correctes
Shubham Khatri
Vous n'avez pas besoin de publier des données? Assurez-vous également que this.state.token contient une valeur
Shubham Khatri
Continuons cette discussion dans le chat .
Kishore Jethava
@ShubhamKhatri, puis-je vous demander de jeter un œil à une axiosquestion connexe ici: stackoverflow.com/questions/59470085/… ?
Istiaque Ahmed
37

Voici un exemple complet de requête axios.post avec des en-têtes personnalisés

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

Matthew Rideout
la source
face à ce problème pour obtenir une demande. La réponse arrive au format xml. Cela ne résout pas le problème.
Eswar
3

Cela pourrait être utile,

const data = {
  email: "[email protected]",
  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);
 })
Remarque: tous les codes d'état supérieurs à 400 seront capturés dans le bloc de capture Axios. De plus, les en-têtes sont facultatifs pour la méthode de publication dans Axios

Blockquote

Blockquote

Fahd Jamy
la source
2

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

Lorsque vous utilisez la bibliothèque axios et que vous passez des en-têtes personnalisés, vous devez construire des en-têtes comme un objet avec le nom de clé "headers". La clé des en-têtes doit contenir un objet, ici c'est Content-Type et Authorization.

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})
        })
Hemadri Dasari
la source
1

Vous pouvez également utiliser des intercepteurs pour passer les en-têtes

Cela peut vous faire économiser beaucoup de code

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;
});
Israël kusayev
la source
Je suggérerais d'utiliserconfig.method.toUpperCase()
Constantine le
@Constantine Je pense que c'est déjà en majuscules
Israel kusayev
Malheureusement, le mien était plus bas
Constantine le
0

Ou, si vous utilisez une propriété du prototype vuejs qui ne peut pas être lue lors de la création, vous pouvez également définir des en-têtes et écrire ie

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");
                })
            }
        },
Dach0
la source
-4

Json doit être formaté avec des guillemets doubles

Comme:

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

Pas seulement:

headers: {
                'Content-Type': 'application/json',
                'Authorization': 'JWT fefege...'
         }
Dunks184
la source
C'est vrai pour le format JSON, mais lorsque vous utilisez javascript, vous pouvez écrire des chaînes javascript comme vous le souhaitez et cela fonctionnera toujours - car le sérialiseur JSON dans axios ne connaît pas la différence! :-)
Jono