wake-up-neo.com

Überschriften mit Axios übergeben POST anfragen [ReactJS]

Ich habe eine Axios POST -Anforderung wie empfohlen aus der npm-Paketdokumentation geschrieben

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

Und es funktioniert, aber jetzt habe ich meine Backend-API geändert, um Header zu akzeptieren 

Inhaltstyp: 'application/json'

Berechtigung: 'JWT fefege ...'

Jetzt funktioniert diese Anfrage auf POSTMAN, aber wenn ich einen Axios-Aufruf schreibe, folge ich diesem Link und kann ihn nicht ganz zum Laufen bringen.

Ich bekomme ständig 400 BAD Request error

Hier ist meine geänderte Anfrage

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

Jede Hilfe wird sehr geschätzt

Danke im Voraus.

reactjsreduxreact-reduxaxios
32
Jagrati

Wenn Sie Axios verwenden, um benutzerdefinierte Header zu übergeben, geben Sie als letztes Argument ein Objekt an, das die Header enthält

Ändern Sie Ihre Axios-Anfrage gerne

        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})
            })
60
Shubham Khatri

Hier ist ein vollständiges Beispiel für eine axios.post-Anfrage mit benutzerdefinierten Kopfzeilen

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

15
Matthew Rideout

Shubham antwortete nicht für mich. 

Wenn Sie die Axios-Bibliothek verwenden und benutzerdefinierte Header übergeben, müssen Sie Header als Objekt mit dem Schlüsselnamen "Headers" erstellen. Der Headers-Schlüssel sollte ein Objekt enthalten, hier sind Content-Type und Authorization.

Das folgende Beispiel funktioniert gut.

    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
Hemadri Dasari

Wenn Sie eine Eigenschaft aus dem vuejs-Prototyp verwenden, die beim Erstellen nicht gelesen werden kann, können Sie auch Header definieren und schreiben, d. H.

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");
                })
            }
        },
0
Dach0

Json muss mit Anführungszeichen formatiert werden

Mögen: 

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

Nicht nur: 

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