En passant les en-têtes avec axios requête POST [ReactJS]

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 il fonctionne, mais maintenant, j'ai modifié mon backend API pour accepter les en-Têtes de

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 se 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 d'avance.

OriginalL'auteur Jagrati | 2017-06-18

  1. 57

    Lors de l'utilisation d'axios, afin de passer en-têtes personnalisés, la fourniture d'un objet contenant les en-têtes comme le dernier argument

    Modifier votre axios demande 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})
            })
    Merci il fonctionne 🙂
    Pas de travail,500. pouvez-vous m'aider?
    500 erreur interne du serveur, pouvez-vous vérifier sur le côté serveur si les en-têtes sont à venir, ou est-il un autre bug
    Il travaille en facteur.
    pouvez vous suffit de vous connecter les en-têtes de votre serveur et voir si vous obtenez les valeurs correctes

    OriginalL'auteur Shubham Khatri

  2. 1

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

    Lorsque vous utilisez axios de la bibliothèque et de passer en-têtes personnalisés, vous avez besoin pour construire des en-têtes comme un objet avec le nom de la clé "en-têtes". Les en-têtes de clé doit contenir un objet, ici c'est le Type de Contenu et d'Autorisation.

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

    OriginalL'auteur Hemadri Dasari

  3. 0

    Json doit être formatée avec des guillemets doubles

    Comme: 

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

    Pas seulement: 

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

    OriginalL'auteur Dunks184