webentwicklung-frage-antwort-db.com.de

Ü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.

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